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



例えば1MB以上のファイルをアップロードさせたくないという時に、使えます。
一番下にコード全文載せておりますのでコピペでそのまま使っていただいてもOKです。





①HTML

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

<script src="https://code.jquery.com/jquery-3.3.1.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>") //エラーメッセージ表示
    }
})







③デモ

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







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



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






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






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

<script src="https://code.jquery.com/jquery-3.3.1.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をコピーしました