jQuery(javascript)複数ファイルのアップロード時に容量オーバーの場合はアラートを出す
ページ内の総容量でチェクする方法↓
2019年現在では、iPhoneとAndroidともにinputタグのfile属性が使えるようになっています\(^o^)/
前までは、画像をアップするだけなのに、面倒なアプリ開発をしなければいけませんでした…。
スマホのカメラ機能はどんどん解像度が上がっているので、1枚の写真が6メガというのが当たり前です。それに伴いレンタルサーバーの方もスペックが上がってきました。
それでも、レンタルサーバーの場合は転送量の軽減を考えなければいけません。
むやみにファイルをアップロードし放題にしては、サーバーがもちません。
ということで、ファイルを選択した際に、ファイル容量を取得して、
容量が規定をオーバーしている場合はデータを送信させないという処理のコードを紹介します。
デモはこちら
<form method="post" action="?" enctype="multipart/form-data">
<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>
※1. jqueryのprop関数はプロパティの取得をします。
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に関しては、下記サイトが分かりやすくまとめられていました。
参考URL https://pinkmonky.net/detail/?id=151
ファイルAPIが使えないブラウザでも対応(各INPUT=”file”単位でのチェック)+未完成?
JavaScriptで<input type=”file”>で選択されたファイルサイズを取得する〜IE編〜
先日作った、画像ファイルが選択されたら、ファイルアップロードを行う処理↓↓
struts+jQuery Form Pluginを使ったファイルアップロード① – わたしの日記だよ
ですが、JavaScriptでファイルサイズをチェックする処理を入れていたものの
IE8だとチェックが効かないよ!と言われてしまいました。
1.現在の実装
今のjsファイルはこんな感じ。(赤字の部分です)
fileupload = function(event) { var $form, target; target = event.target ? event.target : event.srcElement; $form = $(target).closest('form'); return $form.ajaxSubmit({ 'target': "body", 'cache': false, 'beforeSubmit': function(formData, jqForm, options) { // ファイルサイズチェックなどの処理 for (var i = 0; i < formData.length; i++) { if (formData[i]["name"] == "imgFile") { var file = formData[i]["value"]; if (file.size > 200000) { alert("画像は200KB以内のファイルを選択してください。"); return false; } }
} }, 'success': function(filename) { // アップロード成功時の処理 alert("success"); } }); };
jsp側は、前回のエントリ参照。と言っても、ただformの中にtype=”file” name=”imgFile”のinputタグがあるだけです。
上記のコードだと、File APIに対応しているブラウザでないとダメなのですね。
こちら↓↓によると、IEだと対応しているのは10以降。
JavaScriptでローカルファイルを自在に操る – File API | Think IT(シンクイット)
2.回避策・・・imgオブジェクトを使用して取得する
こんなページを見つけました。
選択されたファイルを、一度imgオブジェクトにセットするとサイズが取得できるらしい!
↑↑のページでは、画面に実際にちいさーく表示されるimgを置いていたのですが
なるべく余計な要素を追加したくないので、newしてなんとかならないか、試してみます。
変更後のjsはこんな感じ。
(赤字だった部分だけ。「formname」部分は実際のformのname属性です)
// File APIチェック if (window.File) { // File API対応 var file = formData[i]["value"]; } else { // File API非対応 var file = new Image(); file.src = document.formname.imgFile.value; } alert("file size=" + file.size);
結果は△でした。
type=’file’のvalueプロパティには、セキュリティ上の理由により制約が設けられていて
「document.formname.imgFile.value」で取れるパスは
こんな風に途中がダミーになってしまいます。
該当のサイトを信用済みサイトに登録すれば、本物のパスを取得できるようになりますが
お客さんにそんなこと言えないので実質×ですね。。。><
この後、画面にimgタグを置くパターンも試してみましたが、同じ結果になってしまいました。
リンク先のページをIE8で開いた場合は、取得できるのに何で!?
今回は、時間の都合でphp側でチェックするように切り替えちゃいますが
また追って調査したいと思います。