Question

如何使用<input type="file">选择多个文件？

Answer 1

新答案：

在HTML5中，您可以添加multiple属性以选择多个文件。

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

旧答案：

每<input type="file" />只能选择1个文件。如果你想发送多个文件，您将不得不使用多个输入标签或使用 Flash或Silverlight。

Answer 2

还有HTML5 <input type="file" multiple />（specification）。

浏览器支持在桌面上非常好（IE 9及以前版本不支持），移动设备不太好，我想是因为根据平台和版本更难正确实现。

Answer 3

整个事情应该是这样的：

<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 4

这个jQuery插件（jQuery File Upload Demo）在没有flash的情况下使用它所使用的形式：

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

Answer 5

您现在可以使用HTML5

执行此操作

实质上，您在文件输入上使用multiple属性。

<input type='file' multiple>

Answer 6

HTML5为type属性为file的input元素提供了新的属性multiple。因此，您可以选择多个文件，IE9和以前的版本不支持此功能。

注意：请注意输入元素的名称。当你想上传多个文件时，你应该使用数组而不是字符串作为值 name属性。

ex：input type =“file”name =“myPhotos []”multiple =“multiple”

如果您使用的是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

这很容易......

<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());
};

Answer 9

HTML5为类型属性为file的输入元素提供了多个新属性。因此，您可以选择多个文件，而IE9和以前的版本不支持此文件。

注意：请小心输入元素的名称。当您要上传多个文件时，应使用数组而不是字符串作为name属性的值。

例如：

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

如果您使用的是php，则将在$ _FILES中获取数据并使用var_dump（$ _ FILES）并查看输出并进行处理现在您可以遍历并进行其余操作

Answer 10

将其复制并粘贴到您的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/

如何用<input type =“file”/>选择多个文件？

10 个答案: