jQuery(javascript)複数ファイルのアップロード時に容量オーバーの場合はアラートを出す
2019-08-21 807 19952019年現在では、iPhoneとAndroidともにinputタグのfile属性が使えるようになっています\(^o^)/
前までは、画像をアップするだけなのに、面倒なアプリ開発をしなければいけませんでした…。
スマホのカメラ機能はどんどん解像度が上がっているので、1枚の写真が6メガというのが当たり前です。それに伴いレンタルサーバーの方もスペックが上がってきました。
それでも、レンタルサーバーの場合は転送量の軽減を考えなければいけません。
むやみにファイルをアップロードし放題にしては、サーバーがもちません。
ということで、ファイルを選択した際に、ファイル容量を取得して、
容量が規定をオーバーしている場合はデータを送信させないという処理のコードを紹介します。
デモはこちら
<!----><!----><form method="post" action="?" enctype="multipart/form-data">※1. jqueryのprop関数はプロパティの取得をします。
<ul>
<li><input type="file" name="upfile" accept="image/*"></li>
<li><input type="file" name="upfile" accept="image/*"></li>
<li><input type="file" name="upfile" accept="image/*"></li>
</ul>
</form>
<!----><!----><script>
$(function(){
$('input[type=file]').change(function(){
//サイズ計算
var total_size = 0;
$('input[type=file]').each(function(){
if($(this).val()){
var file = $(this).prop('files')[0]; // ※1
total_size = total_size + file.size;
}
});
//8メガを越えた場合はアラート表示
if(8000000 < total_size){
alert('一度にアップできる容量を超えました');
$(this).val('');
}
});
});
</script>
type="file"の場合はファイル名、ファイルサイズ、ファイル形式が得られます。
次に、レンタルサーバーでは初期で2メガバイトまでしかアップロードできないように設定されていたりします。
その設定を変更するには、PHPで以下のコードをアップロード処理の手前に書きます。
<?php
//アップロード容量制限の変更
ini_set('memory_limit', '128M');
ini_set('post_max_size', '64M');
ini_set('upload_max_filesize', '32M');
?>
これで32メガバイトのファイルがアップできるようになります。
memory_limit、post_max_size、upload_max_filesizeに関しては、下記サイトが分かりやすくまとめられていました。
[PHP] ファイルアップロードの上限サイズを変更する際にさわるディレクティブまとめ
- 関連タグ:
- jquery
- javascript
- アップロード