使用< input type =“file”>？时限制文件格式 [英] Limit file format when using <input type="file">?

问题描述

当用户点击< input type =file>

中的浏览按钮时，我想限制可以从本机操作系统文件选择器中选择的文件类型。 code>元素。我有一种感觉是不可能的，但是我想知道是否有是一个解决方案。我只想保留HTML和JavaScript;

解决方案

严格来说，答案是否。开发者不能阻止用户在本机OS文件选择对话框中选择任何类型或扩展名的文件。

但是， acccept 属性< input type =file> 可以帮助在OS的文件选择对话框中提供一个过滤器。例如，

 <！ - （IE 10+，Edge， Chrome，Firefox 42+） - >< input type =fileaccept =。xls，.xlsx/>  

div>

应该提供一种过滤除.xls或.xlsx之外的文件的方法。虽然的 MDN 页面输入元素总是表示它支持这一点，令我惊讶的是，这在Firefox中直到42版本都不起作用。这适用于IE 10+，Edge和Chrome。

所以，为了支持Firefox超过42，连同IE 10+，Edge和Chrome，我猜最好使用逗号分隔的MIME类型列表：

 <！ - （IE 10+，Edge，Chrome，Firefox） - < ; input type =fileaccept =application / vnd.openxmlformats-officedocument.spreadsheetml.sheet，application / vnd.ms-excel/>  

边缘行为：文件类型过滤器下拉列表显示了此处提到的文件类型，但不是下拉列表中的默认值。默认筛选器为所有文件（*）。


W3C 建议 作者在接受属性。因此，最佳方法是：

 <！ - 正确的方法：使用文件扩展名和相应的MIME类型。 - <！ - （IE 10+，Edge，Chrome，Firefox） - >< input type =fileaccept =.xls，.xlsx，application / vnd.openxmlformats-officedocument.spreadsheetml .sheet，application / vnd.ms-excel/>  

JSFiddle相同：这里。

参考： MIME类型列表


重要信息：使用accept属性仅提供过滤不感兴趣的类型的文件的方法。浏览器仍然允许用户选择任何类型的文件。应该进行额外的（客户端）检查（使用JavaScript，一种方式是这个），绝对是文件类型 必须在服务器上验证 ，使用MIME类型的组合，使用文件扩展名及其二进制签名（ ASP.NET ， PHP ， Ruby ， Java的）。您可能还需要参考这些 表格的文件类型及其魔术数字，执行更强大的服务器端验证。


这里是 three good 读取的文件上传和安全性。

编辑：可以使用其二进制签名进行文件类型验证也可以在客户端侧面使用JavaScript（而不仅仅是通过looki使用HTML5 File API，但仍然需要在服务器上验证文件，因为恶意用户仍然可以通过自定义HTTP请求上传文件。

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.

解决方案

Strictly speaking, the answer is no. The developer cannot prevent the user from choosing files of any type or extension in the native OS file select dialog box.

But still, the acccept 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, Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

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.

So, for supporting Firefox older than 42 along with IE 10+, Edge, and Chrome, I guess it's better to use comma-separated list of MIME-types:

<!-- (IE 10+, Edge, Chrome, Firefox) -->
<input type="file"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

Edge 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 (*).

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, Chrome, Firefox) -->
<input type="file"
 accept=".xls,.xlsx, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" /> 

JSFiddle of the same: here.

Reference: List of MIME-types

IMPORTANT: Using accept attribute only provides a way of filtering out files of types that are not 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.

EDIT: May be 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.

这篇关于使用< input type =“file”>？时限制文件格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！