如何让“文件”类型的 HTML 输入元素只接受 pdf 文件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1548194/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get the HTML's input element of "file" type to only accept pdf files?
提问by air
is there any way that html element file
有没有办法让html元素文件
<input name="file1" type="file" style="width:300px">
only accept PDF files and when we browse its only show PDF files...
只接受 PDF 文件，当我们浏览它时只显示 PDF 文件...
Thanks
谢谢
回答by Charlie Schliesser
To get the HTML fileinput form element to only accept PDFs, you can use the acceptattribute in modern browsers such as Firefox 9+, Chrome 16+, Opera 11+ and IE10+ like such:
要让 HTMLfile输入表单元素只接受 PDF，您可以accept在现代浏览器（例如 Firefox 9+、Chrome 16+、Opera 11+ 和 IE10+）中使用该属性，如下所示：
<input name="file1" type="file" accept="application/pdf">
You can string together multiple mime types with a comma.
您可以用逗号将多种 mime 类型串在一起。
The following string will accept JPG, PNG, GIF, PDF, and EPS files:
以下字符串将接受 JPG、PNG、GIF、PDF 和 EPS 文件：
<input name="foo" type="file" accept="image/jpeg,image/gif,image/png,application/pdf,image/x-eps">
In older browsers the native OS file dialog cannot be restricted – you'd have to use Flash or a Java applet or something like that to handle the file transfer.
在较旧的浏览器中，不能限制本机操作系统文件对话框——您必须使用 Flash 或 Java 小程序或类似的东西来处理文件传输。
And of course it goes without saying that this doesn't do anything to verify the validityof the file type. You'll do that on the server-side once the file has uploaded.
当然，不用说，这对验证文件类型的有效性没有任何作用。文件上传后，您将在服务器端执行此操作。
A little update– with javascript and the FileReader APIyou could do more validation client-side before uploading huge files to your server and checking them again.
一个小更新– 使用 javascript 和FileReader API，您可以在将大文件上传到服务器并再次检查它们之前，在客户端进行更多验证。
回答by Jonathan Feinberg
Not really. See File input 'accept' attribute - is it useful?.
并不真地。请参阅文件输入“接受”属性 - 有用吗？.
回答by DVK
No way to do that other than validate file extension with JavaScript when input path is populated by the file picker. To implement anything fancier you need to write your own component for whichever browser you want (activeX or XUL)
当输入路径由文件选择器填充时，除了使用 JavaScript 验证文件扩展名之外，没有办法做到这一点。要实现更高级的功能，您需要为您想要的任何浏览器（activeX 或 XUL）编写自己的组件
There's an "accept" attribute in HTML4.01 but I'm not aware of any browser supporting it - e.g. accept="image/gif,image/jpeg- so it's a neat but impractical spec
HTML4.01 中有一个“accept”属性，但我不知道有任何浏览器支持它——例如accept="image/gif,image/jpeg——所以这是一个简洁但不切实际的规范
回答by Kir Kanos
The previous posters made a little mistake. The accept attribute is only a display filter. It will not validate your entry before submitting.
以前的海报犯了一个小错误。accept 属性只是一个显示过滤器。在提交之前，它不会验证您的输入。
This attribute forces the file dialog to display the required mime type only. But the user can override that filter. He can choose .and see all the files in the current directory. By doing so, he can select any file with any extension, and submit the form.
此属性强制文件对话框仅显示所需的 MIME 类型。但是用户可以覆盖该过滤器。他可以选择。并查看当前目录中的所有文件。通过这样做，他可以选择具有任何扩展名的任何文件，并提交表单。
So, to answer to the original poster, NO. You cannot restrict the input file to one particular extension by using HTML.
所以，回答原始海报，不。不能使用 HTML 将输入文件限制为一个特定的扩展名。
But you can use javascript to test the filename that has been chosen, just before submitting. Just insert an onclick attribute on your submit button and call the code that will test the input file value. If the extension is forbidden, you'll have to return false to invalidate the form. You may even use a jQuery custom validator and so on, to validate the form.
但是您可以在提交之前使用 javascript 来测试已选择的文件名。只需在提交按钮上插入一个 onclick 属性并调用将测试输入文件值的代码。如果扩展被禁止，您必须返回 false 以使表单无效。您甚至可以使用 jQuery 自定义验证器等来验证表单。
Finally, you'll have to test the extension on the server side too. Same problem about the maximum allowed file size.
最后，您还必须在服务器端测试扩展。关于最大允许文件大小的相同问题。
回答by PhiLho
It can be useful to prevent the distracted user to make an involuntary bad choice, but in any case, you have to do the check on the server side anyway.
The best way is to be clear in the upload page. After that, if the user stupidly upload a big file with the wrong type, that's their loss of time, no?
防止分心的用户做出无意识的错误选择可能很有用，但无论如何，您无论如何都必须在服务器端进行检查。
最好的方法是在上传页面中明确。之后，如果用户愚蠢地上传错误类型的大文件，那是他们的时间损失，不是吗？
回答by Nathan Taylor
Not with the HTML file control, no. A flash file uploader can do that for you though. You could use some client-side code to check for the PDF extension after they select, but you cannot directly control what they can select.
不使用 HTML 文件控件，不。不过，Flash 文件上传器可以为您做到这一点。您可以使用一些客户端代码在他们选择后检查 PDF 扩展名，但您无法直接控制他们可以选择的内容。
