序文:
多くの場合、プロジェクトではファイル、写真、その他の機能をアップロードするために使用され、同時にアップロードされたファイルのサイズを制限する必要があります。多くのプラグインは、バックグラウンドリクエストの検証を使用しており、フロントエンドのJS検証は比較的小さいです。この記事では、アップロードファイルサイズを簡単に判断するためのフロントエンドJSメソッドを紹介します。
これはより良いです
<html> <head> <Meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <script = "text/javascript"> var isie = /msie/i.test(navigator.useragent)&&!windof.opera; function filechange(ターゲット、id){var filesize = 0; var filetypes = [".jpg"、 ".png"、 ".rar"、 ".txt"、 ".zip"、 ".doc"、 ".ppt"、 ".xls"、 ".pdf"、 ".docx"、 ".xlsx"]; var filepath = target.value; var filemaxsize = 1024 * 2; // 2m if(filepath){var isnext = false; var fileend = filepath.substring(filepath.indexof( "。")); if(filetypes && filetypes.length> 0){for(var i = 0; i <filetypes.length; i ++){if(filetypes [i] == fileend){isnext = true;壊す; }}} if(!isnext){alert( "このファイルタイプは受け入れられません!"); Target.Value = ""; falseを返します。 }} else {return false; } if(isie &&!target.files){var filepath =ターゲット.value; var filesystem = new ActiveXObject( "Scripting.filesystemObject"); if(!filesystem.fileexists(filepath))){alert( "添付ファイルは存在しない、再入力してください!"); falseを返します。 } var file = filesystem.getFile(filepath); filesize = file.size; } else {filesize = target.files [0] .size; } var size = filesize / 1024; if(size> filemaxsize){alert( "添付ファイルサイズは「 + filemaxsize / 1024 +" m! ")より大きくできません。 Target.Value = ""; falseを返します。 } if(size <= 0){alert( "添付ファイルサイズは0m!"); Target.Value = ""; falseを返します。 }} </script> </head> <body> <入力タイプ= "file" name "name =" contractFileName "onchange =" filechange(this); "/> </body> </html>次のコードは推奨されません
コードは非常に簡単です。重要なのは、JSを使用してファイルを取得してファイルサイズを取得し、それを判断して傍受する方法です。さまざまな歴史的な理由により、IEのActiveX制御要因とファイルを取得する方法は他のブラウザとは異なる場合があるため、少しの判断が必要です。
JSコード:
<script type = "text/javascript"> //それがIEブラウザーであるかどうかを判断します:/msie/i.test(navigator.useragent)は、シンプルな通常のvar isie = /msie/i.test(navigator.useragent)&&!window.opera; function filechange(ターゲット){var filesize = 0; if(isie &&!target.files){// ie browser var filepath = target.value; //アップロードされたファイルへの絶対パスを取得/** * ActiveXObjectオブジェクトは、IEおよびオペラの使用と互換性のあるJSオブジェクトです * var newOBJ = new ActiveXObject(servername.typename [、location]) * newOBJが必要なオプションです。 ActiveXObjectオブジェクトの変数名を返します。 * servernameは必須です。オブジェクトがあるアプリケーションの名前を提供します。 * TypeNameは必須です。作成されるオブジェクトのタイプまたはクラス。 *場所はオプションです。オブジェクトを作成したネットワークサーバーの名前。 * ///////////////////////////////////////////////////////////////////////////////////////////////////////////ディスク、フォルダー、またはテキストファイルを操作するために使用されるIIS** newobjメソッドと属性が多くあります。たとえば、var file = newobj.createTextfile( "c:/test.txt"、true)2番目のパラメーターは、ターゲットファイルが上書きされるかどうかを示します。 file.close(); */ var filesystem = new ActiveXObject( "Scripting.filesystemObject"); // getFile(PATH)メソッドはディスクからファイルを取得して返します。 var file = filesystem.getFile(filepath); filesize = file.size; //ファイルサイズ、ユニット:b} else {// nonie browser filesize = target.files [0] .size; } var size = filesize / 1024 /1024; if(size> 1){alert( "添付ファイルは1mを超えることはできません"); }} </script>HTMLコード
コードコピーは次のとおりです。
<入力型= "file" onchange = "filechange(this);"/>
JSコードを使用してファイルサイズを判断するためのシンプルで軽量で高速な方法は問題ありません。 ActiveXObjectオブジェクトに興味がある人については、より深くすることができます。入力されたパラメーターに従って異なるオブジェクトを返すことができます。通常、オブジェクトの関数と関数も非常に便利で強力です。
この記事はすべてです。それは非常にシンプルで実用的なコードですか?気に入っていただければ幸いです。