アップロードされるファイルのサイズと形式を制限する jQuery プラグインの例_jquery

この記事の例では、アップロードされるファイルのサイズと形式を制限する jQuery プラグインについて説明します。皆さんの参考に共有してください。具体的な分析は次のとおりです。

クライアントにファイルをアップロードする場合、通常、ファイルのサイズと形式を制限する必要があります。最も一般的な方法は、美しいインターフェイスと強力な機能を備えた特定のプラグインを使用することです。ただし、唯一の欠点は、ブラウザの互換性の問題が発生する場合があることです。この記事では、アップロードされるファイルのサイズと形式を制限できる「オリジナル」の jQuery プラグインを作成します。

まず、checkFileTypeAndSize.js という名前のプラグインを作成します。現在のファイルのサフィックス名がプリセットで許可されているサフィックス名配列に含まれているかどうかを判断して、IE およびその他のブラウザでの現在のファイルのサイズが、プリセットで許可されている最大ファイル サイズより大きいかどうかを判断して、ファイル形式を制限します。プリセット。ファイル サイズを制限し、フォーマット エラー、制限サイズの超過、および条件を満たす場合のコールバック関数を提供します。

コードをコピー コードは次のとおりです:

(関数 ($) {
$.fn.checkFileTypeAndSize = 関数 (オプション) {
//デフォルト設定
var デフォルト = {
許可される拡張子: []、
maxSize: 1024, //単位はKB、デフォルトの最大ファイルサイズは1MB=1024KBです
成功: function () { },
extensionerror: function () { },
サイズエラー: function () { }
};
//マージ設定
options = $.extend(defaults, options);
//要素を走査
return this.each(function () {
$(this).on('change', function () {
//ファイルパスを取得
var filePath = $(this).val();
//ファイルパスは小文字で表記します
var fileLowerPath = filePath.toLowerCase();
// ファイルのサフィックス名を取得します
var extension = fileLowerPath.substring(fileLowerPath.lastIndexOf('.') 1);
//サフィックス名がプリセットおよび許可されるサフィックス名の配列に含まれているかどうかを判断します
If ($.inArray(extension, options.allowedExtensions) == -1) {
options.extensionerror();
$(this).focus();
} else {
{
をお試しください var size = 0;
If ($.browser.msie) {//つまり古いバージョンのブラウザ
var fileMgr = new ActiveXObject("Scripting.FileSystemObject");
var fileObj = fileMgr.getFile(filePath);
サイズ = fileObj.size //バイト
; サイズ = サイズ / 1024;//kb
//サイズ = サイズ / 1024;//mb
} else {//その他のブラウザ
サイズ = $(this)[0].files[0].size;//byte
サイズ = サイズ / 1024;//kb
//サイズ = サイズ / 1024;//mb
} If (サイズ > options.maxSize) {
options.sizeerror();
} else {
options.success();
} } catch (e) {
alert("エラー: "e);
}
}
});
});
};
})(jQuery);

クライアントへの電話は非常に簡単になります。

コードをコピー コードは次のとおりです:<input type="file" name="f" id= "f" />

@セクションスクリプト

{
<script src="~/Scripts/checkFileTypeAndSize.js"></script>
<スクリプトタイプ="text/javascript">
$(function() {
$('#f').checkFileTypeAndSize({
AllowedExtensions：['jpg']、
maxSize: 10、
成功: function() {
アラート('ok');
},
拡張エラー: function() {
alert('許可される形式は jpg');
return;
},
サイズエラー: function() {
alert('最大サイズ 10kb');
return;
}
});
});
</script>
}

この記事が皆さんの jQuery プログラミングに役立つことを願っています。