<input type = "file">で複数のファイルを選択する方法は？

Question

<input type="file">で複数のファイルを選択するにはどうすればよいですか？

Answer 1

新しい答えは：

HTML5では、1つの以上のファイルを選択するために、multiple属性を追加することができます。

<input type="file" name="filefield" multiple="multiple"> 

---

旧答え：

あなただけ<input type="file" />ごとに1つのファイルを選択することができます。 複数のファイルを送信する場合は、複数の入力タグを使用するか、 FlashまたはSilverlightを使用する必要があります。

Answer 2

HTML5 <input type="file" multiple />もありますが、どれくらい広くサポートされているのかわかりません。

Answer 3

このjQueryプラグイン（jQuery File Upload Demoが）それが使っている形で、フラッシュなしでそれをしない：

<input type='file' name='files[]' multiple /> 

Answer 4

全体のことは、次のようになります。

<form enctype='multipart/form-data' method='POST' action='submitFormTo.php'> 
    <input type='file' name='files[]' multiple /> 
    <button type='submit'>Submit</button> 
</form> 

あなたがenctype='multipart/form-data'属性を持っていることを確認してください<form>タグを使用するか、送信後にサーバー側のファイルを読み取ることができません。

Answer 5

あなたはファイル入力で複数の属性を使用して本質的にはHTML5

で、今それを行うことができます。

<input type='file' multiple> 

Answer 6

HTML5は、type属性がfileの入力要素に新しい属性の倍数を提供しました。 複数のファイルを選択することができます。IE9とそれ以前のバージョンはこれをサポートしていません。

注：入力要素の名前に注意してください。 複数のファイルをアップロードする場合は、文字列ではなく配列を使用して、 name属性の値として使用する必要があります。

例：入力タイプは、= "ファイル" の名前は= "myPhotos []は、" 複数の= "複数"

とPHPを使用している場合、あなたは$ _FILES内のデータと 使用のvar_dump（$ _ FILESを取得します）と出力を参照し、今、あなたは反復処理することができ、処理 を行い、残り

Answer 7

<form action="" method="post" enctype="multipart/form-data"> 
<input type="file" multiple name="img[]"/> 
<input type="submit"> 
</form> 
<?php 
print_r($_FILES['img']['name']); 
?> 

Answer 8

コピーを行うと、あなたのHTMLにこれを貼り付けます。

<input type="file" id="files" name="files[]" multiple /> 
<output id="list"></output> 

<script> 
function handleFileSelect(evt) { 
var files = evt.target.files; // FileList object 

// files is a FileList of File objects. List some properties. 
var output = []; 
for (var i = 0, f; f = files[i]; i++) { 
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ', 
       f.size, ' bytes, last modified: ', 
       f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a', 
       '</li>'); 
} 
document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>'; 
} 

これは、このウェブページから私に届きます。http://www.html5rocks.com/en/tutorials/file/dndfiles/

Answer 9

Thats easy ...

<input type='file' multiple> 
$('#file').on('change',function(){ 
    _readFileDataUrl(this,function(err,files){ 
      if(err){return} 
      console.log(files)//contains base64 encoded string array holding the 
      image data 
    }); 
}); 
var _readFileDataUrl=function(input,callback){ 
    var len=input.files.length,_files=[],res=[]; 
    var readFile=function(filePos){ 
     if(!filePos){ 
      callback(false,res); 
     }else{ 
      var reader=new FileReader(); 
      reader.onload=function(e){    
       res.push(e.target.result); 
       readFile(_files.shift()); 
      }; 
      reader.readAsDataURL(filePos); 
     } 
    }; 
    for(var x=0;x<len;x++){ 
     _files.push(input.files[x]); 
    } 
    readFile(_files.shift()); 
};