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

时间:2009-10-10 15:11:50

标签: html validation file input

有什么方法可以使用html元素文件

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

仅接受PDF文件,当我们浏览其仅显示PDF文件时...

由于

7 个答案:

答案 0 :(得分:57)

要使HTML file输入表单元素仅接受PDF,您可以在现代浏览器中使用accept属性,例如Firefox 9 +,Chrome 16 +,Opera 11+和IE10 +等:

<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,您可以在将大型文件上传到服务器并再次检查之前对客户端进行更多验证。

答案 1 :(得分:3)

答案 2 :(得分:2)

当文件选择器填充输入路径时,除了使用JavaScript验证文件扩展名外,无法执行此操作。要实现任何更好的东西,你需要为你想要的任何浏览器(activeX或XUL)编写自己的组件

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

答案 3 :(得分:1)

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

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

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

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

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

答案 4 :(得分:0)

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

答案 5 :(得分:0)

没有

但您可以查看SWFUploadAjax Upload

答案 6 :(得分:0)

防止分心的用户做出非自愿的错误选择会很有用,但无论如何,你必须在服务器端进行检查。
最好的方法是在上传页面中清楚。之后,如果用户愚蠢地上传了一个错误类型的大文件,那就是他们失去的时间,不是吗?