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

air*_*air 36 html validation file input

是否有任何方式的HTML元素文件

<input name="file1" type="file" style="width:300px">
Run Code Online (Sandbox Code Playgroud)

只接受PDF文件,当我们浏览它的唯一显示PDF文件时......

谢谢

Cha*_*ser 68

为了获得HTML file输入表单元素只接受PDF文件,可以使用accept在现代浏览器如Firefox 9+,铬16 +,11 +歌剧和IE10 +像这样的属性:

<input name="file1" type="file" accept="application/pdf">
Run Code Online (Sandbox Code Playgroud)

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

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

<input name="foo" type="file" accept="image/jpeg,image/gif,image/png,application/pdf,image/x-eps">
Run Code Online (Sandbox Code Playgroud)

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

当然,不言而喻,这对于验证文件类型的有效性没有任何作用.文件上传后,您将在服务器端执行此操作.

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


Kai*_*Luo 6

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

<input name="file1" type="file" accept="application/pdf">
Run Code Online (Sandbox Code Playgroud)

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

<input name="file1" type="file" accept=".pdf">
Run Code Online (Sandbox Code Playgroud)

MDN 参考

浏览器兼容性检查


Jon*_*erg 4

并不真地。请参阅文件输入“接受”属性 - 它有用吗?

  • +0。如果你说“是的,但不是真的”,我会同意。特别是现在 Chrome 支持它,我认为 Opera 也可能支持。 (4认同)