当記事では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>") //エラーメッセージ表示
}
})③デモ
下のアップロード領域に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>
コメント