如何使 <input type="file"/> 只接受这些类型？答案

【问题标题】：How to make <input type="file"/> accept only these types?如何使 <input type="file"/> 只接受这些类型？
【发布时间】：2013-06-22 01:04:59
【问题描述】：

我希望我的上传器只允许这些类型：

文档，文档。
xls，xlsx。
ppt，pptx。
txt.
pdf.
图像类型。

我怎样才能做到这一点？我应该在accept 属性中添加什么？感谢您的帮助。

编辑！！！

我还有一件事要问。当弹出用于选择文件的弹出窗口时，在右下角，有一个包含所有允许文件的下拉列表。就我而言，列表会很长。我在列表中看到，有一个名为All Supported Types 的选项。如何使其默认选中并消除所有其他选项？

任何帮助将不胜感激。谢谢。

【问题讨论】：

这会有帮助吗？ stackoverflow.com/questions/11601342/…。不确定是否支持“application/doc”、“application/pdf”和“application/ppt”mime 类型。
Limit file format when using <input type="file">?的可能重复
关于您的第二个问题：“accept 属性不会验证所选文件的类型；它只是为浏览器提供提示，以指导用户选择正确的文件类型。它仍然是可能的（在大多数情况下）用户可以在文件选择器中切换一个选项，以便可以覆盖它并选择他们想要的任何文件，然后选择不正确的文件类型。因此，您应该确保接受属性由适当的服务器端验证。” developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

标签： html file-upload input

【解决方案1】：

根据 HTML5 LC，accept attribute 的值是 comma-separated list of items, each of which is a specific media type like image/gif, or a notation like image/* that refers to all image types, or a filename extension like .gif。 IE 10+ 和 Chrome 支持所有这些，而 Firefox 不支持这些扩展。因此，在这种情况下，最安全的方法是使用media types 和image/* 之类的符号

<input type="file" name="foo" accept=
"application/msword, application/vnd.ms-excel, application/vnd.ms-powerpoint,
text/plain, application/pdf, image/*">

如果我正确理解了意图。请注意，浏览器可能无法准确识别权威注册表中指定的媒体类型名称，因此需要进行一些测试。

【讨论】：

如果您的 doc 文件是用 ubuntu 软件制作的，这将不起作用。
@Jukka K. Korpela 过滤器为我提供了我想要的所有办公文件，谢谢
添加对 docx、xlsx 和 pptx 的支持：application/vnd.openxmlformats-officedocument.wordprocessingml.document、application/vnd.openxmlformats-officedocument.spreadsheetml.sheet、application/vnd.openxmlformats-officedocument。 Presentationml.slideshow
也许在 2014 年给出这个答案时确实如此，但我可以确认逗号分隔的扩展列表在 Firefox 上正常工作。
尝试从 android/ios 设备上传时不起作用。如果有人有解决方案，请告诉我。

【解决方案2】：

如下所示使用

<input type="file" accept=".xlsx,.xls,image/*,.doc, .docx,.ppt, .pptx,.txt,.pdf" />

【讨论】：

浏览器通常不检查文件内容，所以扩展是可以的 - 甚至是首选，因为浏览器不知道所有的 mime 类型。你必须自己检查文件内容。

【解决方案3】：

使用接受属性和 MIME_type 作为值

<input type="file" accept="image/gif, image/jpeg" />

【讨论】：

给出的代码只接受 GIF 和 JPEG 文件，这与问题中要求的相反。
@JukkaK.Korpela，这只是示例代码，您可以将accept 属性设置为MIME_types 作为值
这仍然显示“所有文件”选项。

【解决方案4】：

重要更新：

由于仅使用 application/msword、application/vnd.ms-excel、application/vnd.ms-powerpoint... 仅允许 2003 年之前的 MS 产品，而不是最新的。我发现了这个：

application/msword, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.ms-powerpoint, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation

这包括新的。对于其他文件，您可以通过这种方式检索文件中的 MIME TYPE（请原谅 lang）（在 MIME 列表类型中，没有这个）：

您可以选择和复制内容类型

【讨论】：

为什么不直接写扩展？

【解决方案5】：

PowerPoint 和 pdf 文件：

<html>
<input type="file" placeholder="Do you have a .ppt?" name="pptfile" id="pptfile" accept="application/pdf,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.slideshow,application/vnd.openxmlformats-officedocument.presentationml.presentation"/>
</html>

【讨论】：

【解决方案6】：

作为stated on w3schools:

audio/* - 接受所有声音文件

video/* - 接受所有视频文件

image/* - 接受所有图像文件

MIME_type - 一个有效的 MIME 类型，没有参数。看看 IANA MIME types 以获得标准 MIME 类型的完整列表

【讨论】：

@MateusLeon Lose 不松散。
@reformed 你是什么意思？
@Alex78191 我正在处理 MateusLeon 的评论，该评论似乎已被删除。

【解决方案7】：

为图片写这个

<input type=file accept="image/*">

对于其他，您可以使用表单上的接受属性向浏览器建议限制某些类型。但是，您需要在服务器端代码中重新验证以确保。永远不要相信客户发给你的东西

【讨论】：

给出的代码只接受图像文件，这与问题中要求的相反。