如何让“文件”类型的 HTML 输入元素只接受 pdf 文件？

Posted 2023-02-22

【中文标题】如何让“文件”类型的 HTML 输入元素只接受 pdf 文件？

【英文标题】：How to get the HTML's input element of "file" type to only accept pdf files?

【发布时间】：2010-12-05 14:43:17

【问题描述】：

html元素文件有什么办法

<input name="file1" type="file" style="width:300px">

只接受 PDF 文件，当我们浏览它时只显示 PDF 文件...

谢谢

【参考方案1】：

不是真的。见File input 'accept' attribute - is it useful?。

【讨论】：

+0。如果您改为说“是的，但不是真的”，我会同意。尤其是现在 Chrome 支持它，我认为 Opera 也支持。

【参考方案2】：

不使用 HTML 文件控件，不。不过，Flash 文件上传器可以为您做到这一点。您可以在他们选择后使用一些客户端代码来检查 PDF 扩展名，但您无法直接控制他们可以选择的内容。

【参考方案3】：

没有。

但您可以查看SWFUpload 和Ajax Upload

【参考方案4】：

当文件选择器填充输入路径时，除了使用 javascript 验证文件扩展名之外，没有其他办法。要实现任何更高级的功能，您需要为您想要的任何浏览器（activeX 或 XUL）编写自己的组件

HTML4.01 中有一个“accept”属性，但我不知道有任何浏览器支持它——例如accept="image/gif,image/jpeg - 所以这是一个简洁但不切实际的规范

【讨论】：

+1。此外，Chrome 现在支持此功能。我读到 Opera 已经支持它很长时间了，但我没有检查它。

【参考方案5】：

防止分心的用户做出不自觉的错误选择可能很有用，但无论如何，您必须在服务器端进行检查。 最好的方法是在上传页面中明确。之后，如果用户愚蠢地上传了错误类型的大文件，那是他们的时间损失，不是吗？

【参考方案6】：

要让 HTML file 输入表单元素只接受 PDF，您可以在现代浏览器（例如 Firefox 9+、Chrome 16+、Opera 11+ 和 IE10+ 等）中使用 accept 属性：

<input name="file1" type="file" accept="application/pdf">

您可以用逗号将多个 mime 类型串在一起。

以下字符串将接受 JPG、PNG、GIF、PDF 和 EPS 文件：

<input name="foo" type="file" accept="image/jpeg,image/gif,image/png,application/pdf,image/x-eps">

在旧版浏览器中，无法限制本机操作系统文件对话框 - 您必须使用 Flash 或 Java 小程序或类似的东西来处理文件传输。

当然，不言而喻，这并不能验证文件类型的有效性。文件上传后，您将在服务器端执行此操作。

一点更新 – 使用 javascript 和 FileReader API，您可以在将大文件上传到服务器并再次检查之前在客户端进行更多验证。

【参考方案7】：

以前的海报犯了一个小错误。接受属性只是一个显示过滤器。它不会在提交之前验证您的输入。

此属性强制文件对话框仅显示所需的 mime 类型。 但是用户可以覆盖该过滤器。他可以选择 . 并查看当前目录中的所有文件。通过这样做，他可以选择具有任何扩展名的任何文件，并提交表单。

所以，回答原始海报，不。您不能使用 HTML 将输入文件限制为一个特定的扩展名。

但是您可以在提交之前使用 javascript 来测试已选择的文件名。只需在您的提交按钮上插入一个 onclick 属性并调用将测试输入文件值的代码。如果扩展名被禁止，则必须返回 false 以使表单无效。您甚至可以使用 jQuery 自定义验证器等来验证表单。

最后，您还必须在服务器端测试扩展程序。 关于最大允许文件大小的问题。

【参考方案8】：

accept 属性值是一个字符串，用于定义文件输入应接受的文件类型。您可以使用accept 属性，例如：

<input name="file1" type="file" accept="application/pdf">

或者您可以指定一个唯一的文件类型说明符：

<input name="file1" type="file" accept=".pdf">

MDN Reference

Browser Compatibility Check