マルチファイルのアップロード「ファイル[]」私はフィールドを持つマルチファイルアップロードフォームを持っている私のサイトでJavaScriptの検証

：マルチファイルのアップロード「ファイル[]」私はフィールドを持つマルチファイルアップロードフォームを持っている私のサイトでJavaScriptの検証

<input name="files[]" type="file" id="files" size="30" /> 
<input name="files[]" type="file" id="files" size="30" /> 
<input name="files[]" type="file" id="files" size="30" />

と私はjavascriptのコードでこのフィールドを検証したい、私はのための値を取得する方法を知っていますjavascriptのシンプルなフィールドがいくつかありますが、このフィールドから値を取得する方法はわかりません。ファイル[] "、javascriptでこのフィールド、配列、または...を参照してください。あなたは、このようにファイル名を取得できますかJavaScriptを使用してサイズやファイルタイプの検証を適用する

出典

2017-03-08 Divesh choudhary

で行わかなりそれを取得しないが、私はあなたがDOMを選択したいと仮定しますか？複数のIDを持つことはできないので 'id'を' class'に変更し、 'document.getElementsByClassName（" files "）'を使ってDOMを選択してみてください。 –

どのタイプのファイルを検証したいのですか？ –

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
<input name="files[]" type="file" id="files[]" size="30" /> 
 
<input name="files[]" type="file" id="files[]" size="30" /> 
 
<input name="files[]" type="file" id="files[]" size="30" /> 
 
<button onclick="myFunction()">Get File Name-Type-Size</button> 
 
<script> 
 
function myFunction() { 
 
    var input, file; 
 

 
    if (!window.FileReader) { 
 
     bodyAppend("p", "The file API isn't supported on this browser yet."); 
 
     return; 
 
    } 
 

 
    var input=document.getElementsByName('files[]'); 
 
\t for(var i=0;i<input.length;i++){ 
 
\t \t var file = input[i].files[0]; 
 
\t \t \t bodyAppend("p", "File " + file.name + " is " + formatBytes(file.size) + " in size"+" & type is "+ fileType(file.name));  
 
\t \t } 
 
\t } 
 

 
\t //function to append result to view 
 
\t function bodyAppend(tagName, innerHTML) { 
 
\t \t var elm; 
 

 
\t \t elm = document.createElement(tagName); 
 
\t \t elm.innerHTML = innerHTML; 
 
\t \t document.body.appendChild(elm); 
 
\t } 
 
\t 
 
\t //function to find size of file in diff UNIT 
 
\t function formatBytes(bytes,decimals) { 
 
\t if(bytes == 0) return '0 Byte'; 
 
\t var k = 1000; 
 
\t var dm = decimals + 1 || 3; 
 
\t var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; 
 
\t var i = Math.floor(Math.log(bytes)/Math.log(k)); 
 
\t return parseFloat((bytes/Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]; 
 
\t } 
 

 
\t //function to find file type 
 
\t function fileType(filename){ 
 
\t \t return (/[.]/.exec(filename)) ? /[^.]+$/.exec(filename) : undefined; 
 
\t } 
 
</script> 
 

 
</body> 
 
</html>

今あなたがファイル&サイズの種類に条件を置くことができ、これを確認してください。

出典

2017-03-09 06:29:22

// Try this jQuery ;) 
$("form").on('change', 'input[type=file]', function() { 
    var file; 
    var this = $(this); 
    if (file = this.files[0]) 
    { 
     var img = new Image(); 

     img.onload = function() { 
      // correct 
      // check alert(img.src) 
     } 

     img.onerror = function() { 
      //error info 
     }; 

     img.src = _URL.createObjectURL(file); 
    } 
}

出典

2017-03-08 12:43:37

<!DOCTYPE html> 
 
<html> 
 
<body> 
 

 

 

 

 
<input name="files[]" type="file" id="files[]" size="30" /> 
 
<input name="files[]" type="file" id="files[]" size="30" /> 
 
<input name="files[]" type="file" id="files[]" size="30" /> 
 
<button onclick="myFunction()">Get File Type</button> 
 
<script> 
 

 
function myFunction() { 
 
var file=document.getElementsByName('files[]'); 
 
for(var i=0;i<file.length;i++){ 
 
console.log(file[i].value); 
 
} 
 

 
} 
 
</script> 
 

 
</body> 
 
</html>

。

出典

2017-03-08 12:48:37

ありがとう、しかし、どのように画像サイズのバリデーションとタイプバリデーションを適用することができます –

おかげBhavikボラしかし、すでにこの1

<html> 
    <head> 
    <title>client-side image (type/size) upload validation</title> 
    <meta charset=utf-8> 
    <style> 
    </style> 
    </head> 
    <body> 
    <form><fieldset><legend>Image upload</legend> 
    <input type="file" name="file[]" onchange="getImg(this,100,'jpeg|png')"> 
    <input type="file" name="file[]" onchange="getImg(this,100,'jpeg|png')"> 
    </fieldset> 
    </form> 
    <script> 
    function getImg(input,max,accepted){ 
     var upImg=new Image(),test,size,msg=input.form; 
     msg=msg.elements[0].children[0]; 

     return input.files?validate(): 
     (upImg.src=input.value,upImg.onerror=upImg.onload=validate); 
      "author: b.b. Troy III p.a.e"; 
     function validate(){ 
      test=(input.files?input.files[0]:upImg); 
      size=(test.size||test.fileSize)/1024; 
      mime=(test.type||test.mimeType); 
     mime.match(RegExp(accepted,'i'))? 
     size>max?(input.form.reset(),msg.innerHTML=max+"KB Exceeded!"): 
     msg.innerHTML="Upload ready...":  
     (input.form.reset(),msg.innerHTML=accepted+" file type(s) only!") 
     } 
    } 
    </script> 
    </body> 
    </html>

出典

2017-03-10 06:04:08

マルチファイルのアップロード「ファイル[]」私はフィールドを持つマルチファイルアップロードフォームを持っている私のサイトでJavaScriptの検証

答えて

関連する問題