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

查看:33
本文介绍了使用<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.

因此,为了支持 Firefox 42 以上以及 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.NETPHPRubyJava).您可能还想参考这些 表格 用于文件类型及其幻数,以执行更强大的服务器端验证.

这里是 读取文件上传和安全性.

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.

也许使用其二进制签名的文件类型验证也可以使用 HTML5 文件 API 在客户端使用 JavaScript(而不仅仅是通过查看扩展名)来完成,但是,该文件仍然必须在服务器上进行验证,因为恶意用户仍然可以通过自定义 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.

这篇关于使用&lt;input type="file"&gt;时限制文件格式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆