Webシステム:ファイルアップロード容量制限:クライアント側

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編〜

javascriptIEweb

先日作った、画像ファイルが選択されたら、ファイルアップロードを行う処理↓↓

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」で取れるパスは

f:id:s31o3:20150414114941p:plain

こんな風に途中がダミーになってしまいます。

該当のサイトを信用済みサイトに登録すれば、本物のパスを取得できるようになりますが

お客さんにそんなこと言えないので実質×ですね。。。><

この後、画面にimgタグを置くパターンも試してみましたが、同じ結果になってしまいました。

リンク先のページをIE8で開いた場合は、取得できるのに何で!?

今回は、時間の都合でphp側でチェックするように切り替えちゃいますが

また追って調査したいと思います。

スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサーリンク