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

Posted 2023-03-14

技术标签:

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

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

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

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

编辑！！！

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

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

【问题讨论】：

这会有帮助吗？ ***.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 【参考方案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: