jQueryでアップロードファイルの最大容量を制御する【コピペでOK】



当記事ではjQueryでアップロードファイルの最大容量を制御する方法について記します。
例えば1MB以上のファイルをアップロードさせたくないという時に、使えます。


一番下にコード全文載せておりますのでコピペでそのまま使っていただいてもOKです。





①HTML

画像のアップロード領域だけ用意しました。(formタグは省略しています)
jQueryも忘れずに読み込みます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="file" name="image[]">



②JS

const maxFileSize=1048576 						//アップロードできる最大サイズを指定(1048576=1MB)
$("input[type=file]").change(function(){ 		//ファイルがアップロードされたら
    $(".error_msg").remove()					//エラーメッセージ削除
    let uploaded_file=$(this).prop('files')[0]; //アップロードファイル取得
    if(maxFileSize < uploaded_file.size){ 		//もし上限値を超えた場合
        $(this).val("")							//画像を空にする
        $(this).after("<p class='error_msg'>アップロードできる画像の最大サイズは1MBです</p>") //エラーメッセージ表示
    }
})







connaiconnai

③デモ

下のアップロード領域に1MB以上のファイルをアップするとエラーメッセージがでてアップロードできないと思います。







やってることは、ファイルアップロード時に画像サイズを取得して指定したサイズを超えたらエラーメッセージを出して、アップロード領域を空にするということです。
コメントアウトで動きの説明は書いているので、コードの解説は不要かと思います。



指定サイズのGBやMBからByteへの変換は下記のサイトなどが役に立つかと思います。
バイト換算 – 高精度計算サイト






同じ要領でアップロードできるファイルタイプを制限することもできます。
【jQuery】アップロードできるファイルの種類を制限する【コピペでOK】






ソースコード全文

最後にコードを全文載せておきます。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="file" name="image[]">

<script>
   const maxFileSize=1048576 						//アップロードできる最大サイズを指定(1048576=1MB)
   $("input[type=file]").change(function(){ 		//ファイルがアップロードされたら
      $(".error_msg").remove()						//エラーメッセージ削除
      let uploaded_file=$(this).prop('files')[0]; 	//アップロードファイル取得
      if(maxFileSize < uploaded_file.size){ 		//もし上限値を超えた場合
         $(this).val("")							//画像を空にする
         $(this).after("<p class='error_msg'>アップロードできる画像の最大サイズは1MBです</p>") //エラーメッセージ表示
      }
   })
</script>

コメント

タイトルとURLをコピーしました