jQueryでファイル入力サイズを確認するにはどうすればよいですか?
-
05-07-2019 - |
質問
ファイルアップロード機能を備えたフォームがあり、ユーザーがアップロードしようとしているファイルが大きすぎる場合に、いくつかの優れたクライアント側エラーレポートを作成できるようにしたいのですが、jQueryを使用してファイルサイズを確認する方法はありますか?クライアント上で行うのか、それとも何らかの方法でファイルをサーバーにポストバックしてチェックするのでしょうか?
解決
実際にはファイルシステムにアクセスできません(たとえば、ローカルファイルの読み取りと書き込み)。ただし、HTML5 File Apiの仕様により、アクセスできるファイルプロパティがいくつかあり、ファイルサイズは次のいずれかです。それら。
以下の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-ファイルサイズ/
古いブラウザのサポート
古いブラウザーは、以前の this.files
呼び出しに対して null
値を返すため、 this.files [0]
にアクセスすることに注意してください例外が発生するため、使用する前に File APIサポートを確認する必要があります
他のヒント
jQueryの validate
を使用する場合は、次のメソッドを作成してください:
$.validator.addMethod('filesize', function(value, element, param) {
// param = size (en bytes)
// element = element to validate (<input>)
// value = value of the element (file name)
return this.optional(element) || (element.files[0].size <= param)
});
それを使用します:
$('#formid').validate({
rules: { inputimage: { required: true, accept: "png|jpe?g|gif", filesize: 1048576 }},
messages: { inputimage: "File must be JPG, GIF or PNG, less than 1MB" }
});
このコード:
$("#yourFileInput")[0].files[0].size;
フォーム入力のファイルサイズを返します。
FF 3.6以降では、このコードは次のようになります。
$("#yourFileInput")[0].files[0].fileSize;
ASP.NET FileUpload
コントロールに使用されるソリューションも投稿しています。
おそらく誰かが便利だと思うでしょう。
$(function () {
$('<%= fileUploadCV.ClientID %>').change(function () {
//because this is single file upload I use only first index
var f = this.files[0]
//here I CHECK if the FILE SIZE is bigger than 8 MB (numbers below are in bytes)
if (f.size > 8388608 || f.fileSize > 8388608)
{
//show an alert to the user
alert("Allowed file size exceeded. (Max. 8 MB)")
//reset file upload control
this.value = null;
}
})
});
以下を使用してファイルのサイズを確認し、大きい場合はクリアします
$("input[type='file']").on("change", function () {
if(this.files[0].size > 2000000) {
alert("Please upload file less than 2MB. Thanks!!");
$(this).val('');
}
});
この種のチェックは Flash または Silverlight で実行できますが、JavaScript では実行できません。JavaScript サンドボックスではファイル システムへのアクセスが許可されていません。サイズチェックは、アップロード後にサーバー側で行う必要があります。
Silverlight/Flash のルートを選択する場合は、Silverlight/Flash がインストールされていない場合、デフォルトで通常のコントロールを使用する通常のファイル アップロード ハンドラーが設定されることを確認できます。このようにして、Silverlight/Flash がインストールされている場合は、エクスペリエンスがもう少し充実したものになります。
<form id="uploadForm" class="disp-inline" role="form" action="" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file">
</form>
<button onclick="checkSize();"></button>
<script>
function checkSize(){
var size = $('#uploadForm')["0"].firstChild.files["0"].size;
console.log(size);
}
</script>
標準のajax / html5メソッドを使用してフォームを送信する予定がない場合は、これが最も簡単であることがわかりましたが、もちろん何でも動作します。
注:
var size = $('#uploadForm')["0"]["0"].files["0"].size;
これは以前は動作していましたが、もうクロムでは動作しません。上記のコードをテストしただけで、ffとchrome(最後の)の両方で動作しました。 2番目の["0" "]がfirstChildになりました。
お試しください:
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;
}