アップロード ファイル サイズを制限する JavaScript の実装_JavaScript スキル

序文:

プロジェクトではファイルや写真のアップロードなどの機能がよく使われますが、アップロードするファイルのサイズを制限する必要があります。多くのプラグインはバックグラウンドでのリクエスト検証を使用しますが、フロントエンド JS 検証は比較的少数です。この記事では、アップロードされたファイルのサイズを簡単に判断するためのフロントエンド JS メソッドを紹介します。

コードは非常にシンプルで、重要なのは、JS を使用してファイルを取得し、ファイル サイズを取得し、インターセプトを判断する方法です。さまざまな歴史的理由や IE の ActiveX 制御要因により、ファイルの取得方法が他のブラウザとは異なる場合があるため、少し判断するだけで済みます。

JS コード:

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

<スクリプトタイプ="text/javascript"> // IE ブラウザかどうかを判断します: /msie/i.test(navigator.userAgent) は単純な正規表現です
var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
関数 fileChange(ターゲット){
var fileSize = 0;
If (isIE && !target.files) { // IE ブラウザ
var filePath = target.value // アップロードされたファイルの絶対パスを取得します
/**
※ActiveXObjectオブジェクトはIE、Operaと互換性のあるJSオブジェクトです
* 使用法:
var newobj = new ActiveXObject（servername.typename [、location]）
を使用しています NewOBJが必要なオプションです。 ActiveXObject オブジェクトの変数名を返します。
​​​​​​​このオブジェクトを提供したアプリケーションの名前。
* タイプ名は必須です。作成するオブジェクトのタイプまたはクラス。
場所はオプションです。このオブジェクトを作成したネットワーク サーバーの名前。
*\\\\\\\\\\\\\
​​​​​​​​ ​​​​​​​​​ * 例: var file = newObj.CreateTextFile("C:test.txt", true) 2 番目のパラメーターは、ターゲット ファイルが存在する場合に上書きするかどうかを示します
​​​​​​​​                                */
var fileSystem = new ActiveXObject("Scripting.FileSystemObject");
// GetFile(path) メソッドはディスクからファイルを取得して戻ります。
var file = fileSystem.GetFile(filePath);
fileSize = file.Size // ファイルサイズ、単位: b
}
それ以外の場合 {// IE 以外のブラウザ
fileSize = target.files[0].size;
}
var size = ファイルサイズ / 1024 / 1024;
If (サイズ > 1) {
alert("添付ファイルは 1M を超えることはできません");
}
}

HTML コード

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

JS コードを使用してファイル サイズを決定するシンプルで軽量な方法は問題ありません。興味があれば、さまざまな入力パラメータに応じてさまざまなオブジェクトを返すことができます。通常、このオブジェクトの機能とエフェクトも非常に便利で強力です。

この記事はこれで終わりです。とてもシンプルで実用的なコードだと思いませんか?