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

IT技术 javascript html file-upload
2021-01-13 01:18:51

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

6个回答

新答案:

在 HTML5 中,您可以添加multiple属性来选择 1 个以上的文件。

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

旧答案:

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

这个答案比恐龙更古老
2021-03-15 01:18:51
不是从 HTML5 开始的。输入字段有多个属性。
2021-03-18 01:18:51
@Costa 在 2009 年 10 月 20 日,大多数浏览器都不支持该功能,而 Niavlys 已经在 2 年前展示了 html5 解决方案。
2021-03-30 01:18:51
Gmail 使用 Flash 来做到这一点
2021-03-31 01:18:51
这个multiple="multiple"不是用户友好的,普通用户不理解它,甚至不知道“ctrl button”是做什么的,它不能选择不同文件夹中的文件。
2021-04-05 01:18:51

还有 HTML5 <input type="file[]" multiple />规范)。

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

考虑添加 name="files[]"
2021-03-21 01:18:51
@托马斯是的。名称中的括号不是规范的一部分。浏览器不在乎,也不会改变名称(意味着,它不会添加任何索引)。这主要用于需要这些括号的目标脚本,如 PHP。浏览器将对所有传输的文件使用相同(相同)的名称。在此示例中,所有文件都将具有相同的名称“file[]”。
2021-03-28 01:18:51
@StanE我想你混淆type="file[]"使用name="file[]"
2021-03-28 01:18:51
type="file[]"不是我可以在任何标准中找到的东西,应该导致兼容的浏览器将其解释为type="text". 只是multiple应该够了。
2021-04-04 01:18:51
不支持 IE9 及更早版本:(
2021-04-05 01:18:51

整个事情应该是这样的:

<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>标签中有该属性,否则提交后无法读取服务器端的文件!

除非你用 websocket 或 ajax 提交
2021-03-28 01:18:51

这个 jQuery 插件 ( jQuery File Upload Demo ) 在没有 flash 的情况下以它使用的形式完成:

<input type='file' name='files[]' multiple />
IE9 也不支持,github.com/ blueimp/jQuery-File- Upload/ wiki/...
2021-04-11 01:18:51

你现在可以用 HTML5 来做

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

<input type='file' multiple>
FileReader没有.name属性,因此示例中的标题始终为undefinedjsfiddle.net/m5jeyeyt/1
2021-03-21 01:18:51
我不确定,我检查了同一个地方,哈哈。
2021-04-04 01:18:51
对这件事的支持怎么样?Canisuse.com 没有信息。
2021-04-10 01:18:51