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

110

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

javascript html file-upload

— 面具
source

这是关于javascript和html的内容

— Mask

您是说一次上传多个文件吗（一次选择一个，然后单击上载）？还是说使用Ctrl +单击在一个浏览器窗口中选择多个文件？

— cletus

2

您可以使用input元素上的multiple属性，使用HTML5做到这一点。<input type =' file'multiple

— 哥斯达黎加

126

新答案：

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

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

旧答案：

每个只能选择1个文件<input type="file" />。如果要发送多个文件，则必须使用多个输入标签或使用Flash或Silverlight。

— ZippyV
source

7

Gmail使用Flash来做到这一点

— FabienMénager，2009年

19

自HTML5以来没有。输入字段具有多个属性。

— 哥斯达黎加

2

@Costa在2009年10月20日，大多数浏览器不支持该功能，而Niavlys在两年前已经展示了html5解决方案。

— ZippyV

2

这个答案比恐龙更古老

— 单击Upvote

2

这个multiple =“ multiple”不是用户友好的，平均用户不理解它，甚至不知道“ ctrl button”的作用，并且它不能选择不同文件夹中的文件。

— Jean-Paul

84

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

我认为浏览器在台式机上的支持非常好（只是IE 9和更低版本不支持），而在移动设备上的支持则不太好，因为依赖于平台和版本，很难正确实现。

— Niavlys
source

9

IE9及

— 更高版本

7

考虑添加name="files[]"

— Wariored

22

整个过程应如下所示：

<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>，否则提交后将无法在服务器端读取文件！

— 马克·曼
source

除非您使用websocket或ajax提交它

— bluejayke

14

这个jQuery插件（jQuery File Upload Demo）在不使用Flash的情况下使用以下形式：

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

— DigitalDaigor
source

IE9上也不支持，github.com

— blueimp/

8

您现在可以使用HTML5做到这一点

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

<input type='file' multiple>

— 哥斯达黎加
source

支持这个东西怎么样？Canisuse.com没有该信息。

— 休伯特·奥格

我不确定，我检查了同一地方，哈哈。

— 2013年

1

FileReader没有.name属性，因此示例中的标题始终是undefined：jsfiddle.net/m5jeyeyt/1

— vladkras

1

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

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

例如：输入type =“ file” name =“ myPhotos []” multiple =“ multiple”

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

— Arjun J Gowda
source

1

这很简单 ...

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

— 弗朗西斯·Thiong'o
source

5

这已经清楚地回答了。需要添加一个JavaScript示例吗？

— RightHandedMonkey

造成它的好？

— Thomas Ludewig

0

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

— 阿诺瓦·侯赛因
source

-2

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

— 科利格
source