web-dev-qa-db-ja.com

jQueryの使用、アップロード前のファイルサイズの制限

PHPでは、アップロード後ではなく、アップロード後にファイルサイズを制限する方法があります。フォームの投稿に Malsup jQuery Form Plugin を使用し、画像ファイルの投稿をサポートしています。

サーバーまでのAJAXストリームを通過できるバイト数を設定できる制限があるのではないかと思っていました。これにより、そのファイルサイズを確認し、ファイルが大きすぎる場合にエラーを返すことができます。

クライアント側でこれを行うことにより、ペンタックスから10MBの写真を撮影してアップロードしようとする初心者をブロックします。

javascriptjqueryimagejquery-pluginsupload
46
Mike McKee

これは、非常によく似た質問の回答からのコピーです： jQueryを使用してファイルの入力サイズを確認する方法は？

実際には、ファイルシステムにアクセスできません（たとえば、ローカルファイルの読み取りと書き込み）。ただし、HTML5 File API仕様により、アクセスできるファイルプロパティがいくつかあり、ファイルサイズもその1つです。

このHTMLの場合：

<input type="file" id="myFile" />

以下を試してください：

//binds to onchange event of your input field
$('#myFile').bind('change', function() {
  //this.files[0].size gets the size of your file.
  alert(this.files[0].size);
});

これはHTML5仕様の一部であるため、最新のブラウザー（IEに必要なv10）でのみ機能し、ここで を追加しました 知っておくべき他のファイル情報に関する詳細とリンク： http://felipe.sabino.me/javascript/2012/01/30/javascipt-checking-the-file-size/

古いブラウザのサポート

古いブラウザは前のthis.files呼び出しに対してnull値を返すため、this.files[0]にアクセスすると例外が発生するため、File APIを チェックする必要があります。サポートする それを使用する前に

47
Felipe Sabino

Flash、activex、またはJavaアップローダーを使用しない限り可能だとは思わない。

セキュリティ上の理由から、ajax/javascriptは、アップロード前またはアップロード中にファイルストリームまたはファイルプロパティにアクセスできません。

8
Todd Smith

この方法で試してみたところ、IE *およびMozilla 3.6.16で結果が得られましたが、古いバージョンではチェックインしませんでした。

<img id="myImage" src="" style="display:none;"><br>
<button onclick="findSize();">Image Size</button>
<input type="file" id="loadfile" />
<input type="button" value="find size" onclick="findSize()" />
<script type="text/javascript">
function findSize() {
    if ( $.browser.msie ) {
       var a = document.getElementById('loadfile').value;
           $('#myImage').attr('src',a);
           var imgbytes = document.getElementById('myImage').size;
           var imgkbytes = Math.round(parseInt(imgbytes)/1024);
           alert(imgkbytes+' KB');
    }else {
           var fileInput = $("#loadfile")[0];
           var imgbytes = fileInput.files[0].fileSize; // Size returned in bytes.
           var imgkbytes = Math.round(parseInt(imgbytes)/1024);
                   alert(imgkbytes+' KB');
     }
}    
</script>

Jqueryライブラリも追加します。

6
Abhilash RS

同じ問題が発生しました。 ActiveXまたはFlash（またはJava）を使用する必要があります。良いことは、侵襲的である必要がないことです。アップロードするファイルのサイズを返す簡単なActiveXメソッドがあります。

Flashを使用する場合は、いくつかの派手なjs/cssを実行して、アップロードエクスペリエンスをカスタマイズすることもできます。Flash（1x1の「ムービー」）のみを使用してファイルアップロード機能にアクセスできます。

4
EndangeredMassa

Apache2（Apache 1.5もチェックすることをお勧めします）には、アップロードする前に.htaccessファイルにこれをドロップすることでこれを制限する方法があることがわかりました。

LimitRequestBody 2097152

これにより、ファイルのアップロード時に2メガバイト（2 * 1024 * 1024）に制限されます（バイト計算が適切に行われた場合）。

これを行う場合、フォームの投稿またはリクエストの取得でこの制限を超えると、Apacheエラーログがこのエントリを生成します。

Requested content-length of 4000107 is larger than the configured limit of 2097152

また、このメッセージをWebブラウザーに表示します。

<h1>Request Entity Too Large</h1>

したがって、AJAX Malsup jQuery Form Pluginのようなフォーム投稿を行う場合、このようなH1応答をトラップしてエラー結果を表示できます。

ところで、返されるエラー番号は413です。したがって、.htaccessファイルで次のようなディレクティブを使用できます。

Redirect 413 413.html

...そして、より優雅なエラー結果を返します。

4
Mike McKee
 $(".jq_fileUploader").change(function () {
    var fileSize = this.files[0];
    var sizeInMb = fileSize.size/1024;
    var sizeLimit= 1024*10;
    if (sizeInMb > sizeLimit) {


    }
    else {


    }
  });
3
Shemeemsha R A

他の人が言ったように、そのようなセキュリティモデルのために、JavaScriptだけでは不可能です。

可能であれば、以下のソリューションのいずれかをお勧めします。どちらもクライアント側の検証にフラッシュコンポーネントを使用します。ただし、Javascript/jQueryを使用して接続されます。どちらも非常にうまく機能し、サーバー側の技術で使用できます。

http://www.uploadify.com/

http://swfupload.org/

2
JamesEggers

クライアント側で画像のサイズ、幅、または高さを確認することはできません。このファイルをサーバーにアップロードして、PHPを使用してすべての情報を確認する必要があります。PHPには次のような特別な関数があります：getimagesize()

list($width, $height, $type, $attr) = getimagesize("img/flag.jpg");
echo "<img src=\"img/flag.jpg\" $attr alt=\"getimagesize() example\" />";
0
Adrian

以下のコードを試してください：

var sizeInKB = input.files[0].size/1024; //Normally files are in bytes but for KB divide by 1024 and so on
var sizeLimit= 30;

if (sizeInKB >= sizeLimit) {
    alert("Max file size 30KB");
    return false;
}
0
Bablu Ahmed