如何使用选择多个文件?

How to select multiple files with <input type="file">?

如何使用选择多个文件?

9 个解决方案

#1

New answer:

新回答:

In HTML5 you can add the multiple attribute to select more than 1 file.

在HTML5中，可以添加多个属性来选择一个以上的文件。

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

---

Old answer:

旧的回答:

You can only select 1 file per <input type="file" />. If you want to send multiple files you will have to use multiple input tags or use Flash or Silverlight.

您只能选择1个文件/ 。如果你想发送多个文件，你必须使用多个输入标签或使用Flash或Silverlight。

#2

There is also HTML5 <input type="file" multiple /> (specification).

还有HTML5 (specification)。

Browser support is quite good on desktop (just not supported by IE 9 and prior), less good on mobile, I guess because it's harder to implement correctly depending on the platform and version.

浏览器支持在桌面上很好(只是IE 9和prior不支持)，在移动设备上不太好，我猜是因为根据平台和版本很难正确实现。

#3

The whole thing should look like:

整个事情应该是这样的:

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

Make sure you have the enctype='multipart/form-data' attribute in your <form> tag, or you can't read the files on the server side after submission!

确保在

标记中有enctype='multipart/form-data'属性，否则提交后无法读取服务器端文件!

#4

This jQuery plugin (jQuery File Upload Demo) does it without flash, in the form it's using:

这个jQuery插件(jQuery File Upload Demo)不需要flash就能完成，它使用的形式是:

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

#5

You can do it now with HTML5

你现在可以用HTML5实现

In essence you use the multiple attribute on the file input.

本质上，您使用了文件输入上的多个属性。

<input type='file' multiple>

#6

HTML5 has provided new attribute multiple for input element whose type attribute is file. So you can select multiple files and IE9 and previous versions does not support this.

HTML5为类型属性为file的输入元素提供了新的属性倍数。所以你可以选择多个文件，IE9和以前的版本不支持这个。

NOTE: be carefull with the name of the input element. when you want to upload multiple file you should use array and not string as the value of the name attribute.

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

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

例:输入类型="file" name="myPhotos[]" multiple="multiple"

and if you are using php then you will get the data in $_FILES and use var_dump($_FILES) and see output and do processing Now you can iterate over and do the rest

如果您正在使用php，那么您将获得$_FILES中的数据并使用var_dump($_FILES)并查看输出并进行处理，现在您可以进行迭代并完成其余的工作

#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']);
?>

#8

Copy and paste this into your html:

复制并粘贴到您的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>';
}

This comes to you, through me, from this webpage: http://www.html5rocks.com/en/tutorials/file/dndfiles/

这是我通过这个网页找到的:http://www.html5rocks.com/en/tutorials/file/dndfiles/

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