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

Question

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

javascripthtmlfile-upload

194

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

- Mask

这是关于JavaScript和HTML的内容。 - Mask

你是指一次性上传多个文件（当你一次只选择一个文件，然后点击上传）吗？还是指在一个浏览器窗口中使用ctrl+click来选择多个文件？ - cletus

4

你可以使用HTML5中的input元素上的multiple属性来实现。 <input type ='file' multiple =''> 这是一个很好的示例，演示了如何使用它：http://jsfiddle.net/0GiS0/Yvgc2/ - Costa Michailidis

11个回答

97

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

在桌面端，浏览器支持相当好（只是IE 9及以下版本不支持），但在移动设备上支持程度不太理想，我想这可能是因为根据平台和版本实现正确性更难。

- sylbru

9

不支持 IE9 及其之前的版本 :( - Ashit Vora

33

整个事情应该看起来像：

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

请确保在您的<form>标签中添加enctype='multipart/form-data'属性，否则在提交后，服务器端将无法读取文件！

- mark.inman

除非您使用WebSocket或Ajax提交，否则请仅返回翻译后的文本。 - B''H Bi'ezras -- Boruch Hashem

17

这个jQuery插件(jQuery文件上传演示)无需Flash即可实现，其使用的表单如下：

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

- DigitalDaigor

不支持IE9及以下版本，https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support#multiple-file-selection - JerryDDG

16

现在你可以使用HTML5来实现它

本质上，您需要在文件输入上使用多个属性。

<input type='file' multiple>

- Costa Michailidis

这个东西的支持情况如何？Canisuse.com上没有相关信息。 - Hubert OG

我不确定，我检查了同样的地方，哈哈。 - Costa Michailidis

1

FileReader没有.name属性，所以你示例中的标题始终为undefined：http://jsfiddle.net/m5jeyeyt/1/ - vladkras

1

@HubertOG https://caniuse.com/input-file-multiple@HubertOG https://caniuse.com/input-file-multiple - syahid246

3

这很简单...

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

- Francis Thiong'o

7

已经清楚回答了。为什么还需要添加一个JavaScript示例呢？ - RightHandedMonkey

2

由于它很不错？ - Thomas Ludewig

3

只需使用multiple属性即可。

<input type='file' multiple>

了解更多关于多选属性的信息。

- Sangwin Gawande

1

HTML5为类型属性为file的input元素提供了新属性multiple。因此，您可以选择多个文件，但IE9及更早版本不支持此功能。

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

例如：如果您正在使用PHP，则可以在$_FILES中获取数据，使用var_dump($_FILES)查看输出并进行处理。现在，您可以迭代并执行其他操作。

- Arjun J Gowda

0

HTML5为文件类型的输入元素提供了新的属性multiple。因此，您可以选择多个文件，但IE9及之前的版本不支持此功能。

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

例如：

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

如果你正在使用 PHP，那么你将会在 $_FILES 中获取数据，使用 var_dump($_FILES) 查看输出并进行处理。现在，你可以迭代并完成其余部分。

- Patricia Zorrilla

-1

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

- Anowar Hossain

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ZippyV · Accepted Answer

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

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

旧的回答：

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