使用<input type="file>>时限制文件格式?
我想限制当用户单击 <input type="file"> 元素中的浏览"按钮时可以从本机操作系统文件选择器中选择的文件类型在 HTML 中.我觉得这是不可能的，但我想知道是否有 解决方案.我想只保留 HTML 和 JavaScript；请不要使用 Flash.
I'd like to restrict the type of file that can be chosen from the native OS file chooser when the user clicks the Browse button in the <input type="file"> element in HTML. I have a feeling it's impossible, but I'd like to know if there is a solution. I'd like to keep solely to HTML and JavaScript; no Flash please.
推荐答案
严格来说，答案是否.开发人员不能阻止用户上传任何类型或扩展名的文件.
但是，accept 的属性 可以帮助在操作系统的文件选择对话框中提供过滤器.例如，
Strictly speaking, the answer is no. A developer cannot prevent a user from uploading files of any type or extension.
But still, the accept attribute of <input type = "file"> can help to provide a filter in the file select dialog box of the OS. For example,
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />应该提供一种过滤除 .xls 或 .xlsx 以外的文件的方法.虽然 MDN 页面用于 input 元素总是说它支持这个，令我惊讶的是，直到 Firefox 42 版本才对我有用.这适用于 IE 10+、Edge 和 Chrome.
should provide a way to filter out files other than .xls or .xlsx. Although the MDN page for input element always said that it supports this, to my surprise, this didn't work for me in Firefox until version 42. This works in IE 10+, Edge, and Chrome.
因此，为了支持 42 岁以上的 Firefox 以及 IE 10+、Edge、Chrome 和 Opera，我想最好使用逗号分隔的 MIME 类型列表:
So, for supporting Firefox older than 42 along with IE 10+, Edge, Chrome, and Opera, I guess it's better to use comma-separated list of MIME-types:
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> [Edge (EdgeHTML) 行为:文件类型过滤器下拉列表显示此处提到的文件类型，但不是下拉列表中的默认值.默认过滤器是所有文件(*).]
[Edge (EdgeHTML) behavior: The file type filter dropdown shows the file types mentioned here, but is not the default in the dropdown. The default filter is All files (*).]
您还可以在 MIME 类型中使用星号.例如:
You can also use asterisks in MIME-types. For example:
<input type="file" accept="image/*" /> <!-- all image types -->
<input type="file" accept="audio/*" /> <!-- all audio types -->
<input type="file" accept="video/*" /> <!-- all video types --> W3C 推荐 作者在 accept 属性中指定 MIME 类型和相应的扩展名.因此，最佳方法是:
W3C recommends authors to specify both MIME-types and corresponding extensions in the accept attribute. So, the best approach is:
<!-- Right approach: Use both file extensions and corresponding MIME-types. -->
<!-- (IE 10+, Edge (EdgeHTML), Edge (Chromium), Chrome, Firefox) -->
<input type="file"
accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 同样的 JSFiddle:这里.
JSFiddle of the same: here.
参考: MIME 类型列表
重要提示:使用 accept 属性仅提供一种过滤感兴趣类型文件的方法.浏览器仍然允许用户选择任何类型的文件.应该进行额外的(客户端)检查(使用 JavaScript，一种方法是 this)，绝对是文件类型 必须在服务器上验证，使用 MIME 类型的组合，同时使用文件扩展名及其二进制签名 (ASP.NET, PHP, Ruby, Java).您可能还想参考 这些 表格 用于文件类型及其 幻数，执行更强大的服务器端验证.
这里是 三 好 读取文件上传和安全性.
Reference: List of MIME-types
IMPORTANT: Using the accept attribute only provides a way of filtering in the files of types that are of interest. Browsers still allow users to choose files of any type. Additional (client-side) checks should be done (using JavaScript, one way would be this), and definitely file types MUST be verified on the server, using a combination of MIME-type using both the file extension and its binary signature (ASP.NET, PHP, Ruby, Java). You might also want to refer to these tables for file types and their magic numbers, to perform a more robust server-side verification.
Here are three good reads on file-uploads and security.
也许使用其二进制签名的文件类型验证也可以在客户端使用 JavaScript(而不仅仅是通过查看扩展名)使用 HTML5 File API 完成，但仍然，文件必须在服务器上进行验证，因为恶意用户仍然可以通过发出自定义 HTTP 请求来上传文件.
Maybe file type verification using its binary signature can also be done on client side using JavaScript (rather than just by looking at the extension) using HTML5 File API, but still, the file must be verified on the server, because a malicious user will still be able to upload files by making a custom HTTP request.
相关文章