web-dev-qa-db-ja.com

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

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

javascripthtmlfile-upload
88
Mask

新しい答え：

HTML5では、multiple属性を追加して、複数のファイルを選択できます。

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

古い答え：

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

98
ZippyV

HTML5 <input type="file" multiple />（ specification ）もあります。

ブラウザのサポートはデスクトップでは非常に良好で（IE 9以前ではサポートされていません）、モバイルではあまり良くありません。プラットフォームとバージョンによっては正しく実装するのが難しいためだと思います。

76
Niavlys

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

<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>属性があることを確認してください。そうでないと、送信後にサーバー側でファイルを読み取ることができません。

19
mark.inman

このjQueryプラグイン（ jQuery File Upload Demo ）は、フラッシュなしで、使用している形式で実行します。

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

HTML5で今すぐできる

基本的に、ファイル入力でmultiple属性を使用します。

<input type='file' multiple>
8
Costa

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

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

例：input type = "file" name = "myPhotos []" multiple = "multiple"

phpを使用している場合は、$ _ FILESのデータを取得してvar_dump（$ _ FILES）を使用し、出力を確認して処理を実行します。

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

簡単だ ...

<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());
};
0
Francis Thiong'o