如何使<input type =“ file” />仅接受这些类型？

77

我希望我的上传器仅允许以下类型：

doc，docx。
xls，xlsx。
ppt，pptx
文本。
pdf。
图像类型。

我该如何实现？我应该在accept属性中输入什么？谢谢你的帮助。

编辑！！！

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

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

html file-upload input

— Triet Doan
source

请问有帮助吗？stackoverflow.com/questions/11601342/…。不确定是否支持“应用程序/文档”，“应用程序/ pdf”和“应用程序/ ppt” MIME类型。

— Neigyl R. Noval

1

使用<input type =“ file”>时

— 马丁·托马

关于您的第二个问题：“ accept属性不会验证所选文件的类型；它只是为浏览器提供提示，以引导用户选择正确的文件类型。在大多数情况下，用户仍然可以切换文件选择器中的“选项”，使其可以覆盖此选项并选择所需的任何文件，然后选择错误的文件类型。因此，您应确保通过适当的服务器端验证来备份accept属性。developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file

— 科迪（Cody）'18年

135

根据HTML5 LC，该accept属性的值是逗号分隔的项目列表，每个项目都是特定的媒体类型，例如image/gif，或表示image/*所有image类型的符号，或文件扩展名，例如.gif。IE 10+和Chrome支持所有这些，而Firefox不支持扩展。因此，最安全的方法是使用媒体类型和符号image/*，例如

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

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

— Jukka K.Korpela
source

4

如果您的文档文件是用ubuntu软件制作的，则此方法将无效。

— Shabbir Dhangot

@Jukka K. Korpela筛选器为我获取了我想要的所有办公文件，谢谢您

— pavan kumar 17-4-5

17

要为docx，xlsx和pptx添加支持：application / vnd.openxmlformats-officedocument.wordprocessingml.document，application / vnd.openxmlformats-officedocument.spreadsheetml.sheet，application / vnd.openxmlformats-officedocument.presentationml.slideshow

— Charles Cavalcante

1

也许在2014年给出答案时确实如此，但是我可以确认以逗号分隔的扩展列表在Firefox上可以正常工作。

— Joe Firebaugh

尝试从android / ios设备上传时不起作用。如果有人有解决方案，请告诉我。

— Goldy

88

使用如下

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

— 阿吉斯
source

1

浏览器通常不检查文件内容，因此扩展名可以-甚至可以使用扩展名，因为浏览器不知道所有的mime类型。您必须自己检查文件内容。

— luxigo

10

使用MIME_type作为值的accept属性

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

— 查米卡·桑达马尔（Chamika Sandamal）
source

5

给出的代码仅接受GIF和JPEG文件，与问题中要求的相反。

— Jukka K. Korpela 2014年

2

@ JukkaK.Korpela，这只是示例代码，您可以将s设置为值的accept属性MIME_type

— Chamika Sandamal 2014年

这仍然显示“所有文件”选项。

— DaveB

10

重要更新：

由于仅使用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

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

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

— Epistomai
source

7

对于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>

— 阿米尔·阿德鲁兹曼（Amir Md Amiruzzaman）
source

3

如w3schools所述：

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

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

图片/ *-接受所有图片文件

MIME_type-没有参数的有效MIME类型。查看IANA MIME类型以获取标准MIME类型的完整列表

— 威尔克·艾斯里（Wilker Iceri）
source

3

@MateusLeon迷路了。

— 改革

0

对于图像写这个

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

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

— 萨加尔·瓦格拉（Sagar Vaghela）
source

4

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

— Jukka K. Korpela 2014年