ファイルのアップロード前の検出は通常、ファイル名に基づいてファイルの種類が正当かどうかを判断しますが、ローカルで行うかコントロールを使用しない限り、ファイルのサイズを検出することは困難です。単語の問題は JS を使用して簡単に解決できます。JS は画像をアップロードする前にサイズを決定できます。その効果は...//アップロードできる画像ファイルのサイズです。具体的なコードは次のとおりです コードをコピー コードは次のとおりです: <br>var ImgObj=new Image(); // 画像オブジェクトを作成します <br>var AllImgExt=".jpg|.jpeg|.gif|.bmp|。 png|"//すべての画像形式タイプ<br>var FileObj,ImgFileSize,ImgWidth,ImgHeight,FileExt,ErrMsg,FileMsg,HasCheked,IsImg//グローバル変数画像関連属性<br>//以下は制限付き変数です<br> varAllowExt=".jpg|.gif|.doc|.txt|" //アップロードできるファイルの種類は何ですか? 無制限の場合は、<br>//var を表す小文字を追加します。 AllowExt=0 <br>varAllowImgFileSize=70; //アップロードが許可される画像ファイルのサイズ。0 は無制限です。単位: KB <br>varAllowImgWidth=500; //アップロードが許可される画像ファイルの幅無制限の単位: px (ピクセル) <br>varallowImgHeight=500; //アップロードされた画像の高さは無制限の単位: px (ピクセル) <br>HasChecked=false; <br>function CheckProperty(obj) / /画像のプロパティを検出します<br>{ <br>FileObj=obj; <br>if(ErrMsg!="") //正しい画像ファイルに対してエラー メッセージが返されたかどうかを確認し、リセットします <br>{ <br>ShowMsg (ErrMsg,false); <br>return false; //Return<br>} <br>if(ImgObj.readyState!="complete") //画像が読み込まれていない場合はループ検出を実行します<br>{ <br>setTimeout("CheckProperty(FileObj)", 500); <br>return false; <br>} <br>ImgFileSize=Math.round(ImgObj.fileSize/1024*100)/100;// サイズを取得します画像ファイル<br>ImgWidth=ImgObj.width // 画像の幅を取得します<br>ImgHeight=ImgObj.height; // 画像の高さを取得します<br>FileMsg="nPicture size:" ImgWidth "*" ImgHeight "px"; <br>FileMsg=FileMsg "nPicture ファイル サイズ :"ImgFileSize"Kb"; 「AllowImgWidth」pxより小さい幅のファイルをアップロードしてください。現在の画像の幅は「ImgWidth」pxです; <br>if(AllowImgHeight!=0&&AllowImgHeight<ImgHeight) <BR>ErrMsg=ErrMsg "n画像の高さが制限を超えています。 「AllowImgHeight」px 未満の高さのファイルをアップロードしてください。現在の画像の高さは "ImgHeight "px"; <BR>if(AllowImgFileSize!=0&&AllowImgFileSize<ImgFileSize) <BR>ErrMsg=ErrMsg "n画像ファイルのサイズが超えています。限界。 「AllowImgFileSize」KB より小さいファイルをアップロードしてください。現在のファイル サイズは「ImgFileSize "KB」です。<BR>if(ErrMsg!="") <BR>ShowMsg(ErrMsg,false); <BR>else <BR>ShowMsg ( FileMsg,true); <BR>} <BR>ImgObj.onerror=function(){ErrMsg='n画像の形式が間違っているか、画像が破損しています!'} <BR>function ShowMsg(msg,tf) //表示プロンプト メッセージ tf=true はファイル情報を表示します tf=false はエラー メッセージを表示します msg-information content <BR>{ <BR>msg=msg.replace("n","<li>"); replace( /n/gi,"<li>"); <br>if(!tf) <br>{ <br>document.all.UploadButton.disabled=true; <br>FileObj.outerHTML=FileObj.outerHTML ; <br>MsgList.innerHTML=msg; <br>HasChecked=false; <br><br>document.all.UploadButton.disabled=false; 🎜> PreviewImg.innerHTML="<img src='" ImgObj.src "' width='60' height='60'>" <br>else <br>PreviewImg.innerHTML="非画像ファイル"; <br> MsgList.innerHTML=msg; <br>HasChecked=true; <br>} <br>} <br>関数 CheckExt(obj) <br>{ <br>ErrMsg=""; "; <br>FileObj=obj; <br>IsImg=false; <br>HasChecked=false; <br>PreviewImg.innerHTML="プレビュー領域"; <br>if(obj.value=="")return false ; <br>MsgList.innerHTML="ファイル情報処理中..."; <br>document.all.UploadButton.disabled=true; <br>FileExt=obj.value.lastIndexOf("." )) .toLowerCase(); <br>if(AllowExt!=0&&AllowExt.indexOf(FileExt "|")==-1) //ファイル タイプのアップロードが許可されているかどうかを判断します<br>{ <br>ErrMsg= 「nこのファイル タイプは許可されていません。アップロードは許可されています。Please upload a file of " AllowExt " type. The current file type is " FileExt; <br>ShowMsg(ErrMsg,false); <br>return false; <br>} <br>if(AllImgExt.indexOf(FileExt "|") !=-1) //If it is an image file, perform image information processing <br>{ <br>IsImg=true; <br>ImgObj.src=obj.value; <br>CheckProperty(obj); <br>return false; <br>} <br>else <br>{ <br>FileMsg="nFile extension:" FileExt; <br>ShowMsg(FileMsg,true); <br>} <br>} <br>function SwitchUpType(tf) <br>{ <br>if(tf) <br>str='<input type="file" name="file1" onchange="CheckExt(this)" style="width:180px;" >' <br>else <br>str='<input type="text" name="file1" onblur="CheckExt(this)" style="width:180px;">' <br>document. all.file1.outerHTML=str; <br>document.all.UploadButton.disabled=true; <br>MsgList.innerHTML=""; <br>} <br> < ;legend>Image source LocalRemote: Preview area Note that readers can directly copy the above code and save it as an HTML file to preview JS restrictions Upload image size effect
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
