使用<input type="file"时限制文件格式>?

我想限制可以从本机操作系统文件选择器中选择的文件类型，当用户单击HTML中的<input type="file">元素中的Browse按钮时。我感觉这是不可能的，但我想知道是否有解决办法。我希望只使用HTML和JavaScript;请不要用闪光灯。

当前回答

您可以在文件选择框中使用“accept”属性作为过滤器。使用“accept”可以帮助您根据“后缀”或“MIME类型”过滤输入文件

1.基于后缀的过滤: 这里的“accept”属性只允许选择扩展名为。jpeg的文件。

<input type="file" accept=".jpeg" />

2.基于“文件类型”的过滤器这里的“accept”属性只允许你选择一个“image/jpeg”类型的文件。

<input type="file" accept="image/jpeg" />

重要提示:我们可以更改或删除文件的扩展名，而不改变模因类型。例如，可以有一个没有扩展名的文件，但该文件的类型可以是“image/jpeg”。所以这个文件不能通过accept=".jpeg"过滤器。但是它可以传递accept="image/jpeg"。

3.我们可以使用*来选择各种文件类型。例如下面的代码允许选择所有类型的图像。例如"image/png"或"image/jpeg"或... .所有这些都是允许的。

<input type="file" accept="image/*" />

4.我们可以在select属性中使用cama(，)作为“或操作符”。例如，允许所有类型的图像或pdf文件，我们可以使用以下代码:

<input type="file" accept="image/* , application/pdf" />

2020-08-13 14:37:50

其他回答

我知道有点晚了。

function Validatebodypanelbumper(theForm)
{
   var regexp;
   var extension =     theForm.FileUpload.value.substr(theForm.FileUpload1.value.lastIndexOf('.'));
   if ((extension.toLowerCase() != ".gif") &&
       (extension.toLowerCase() != ".jpg") &&
       (extension != ""))
   {
      alert("The \"FileUpload\" field contains an unapproved filename.");
      theForm.FileUpload1.focus();
      return false;
   }
   return true;
}

2014-08-10 15:54:12

从技术上讲，您可以在input元素上指定accept属性(html5中的另一种选择)，但它不受适当支持。

2010-12-01 20:55:24

你实际上可以用javascript来做，但记住js是客户端，所以你实际上是“警告用户”他们可以上传什么类型的文件，如果你想避免(限制或限制如你所说)某些类型的文件，你必须在服务器端做它。

如果您想开始服务器端验证，请查看这个基本的tut。对于整个教程，请访问这个页面。

好运！

2010-12-01 20:54:57

严格地说，答案是否定的。开发人员不能阻止用户使用前端验证(HTML/JavaScript)上传任何类型或扩展名的文件。但是，<input type = "file">的accept属性可以帮助在用户的浏览器/操作系统提供的文件选择对话框中提供一个过滤器。例如,

<！——(IE 10+， Edge (EdgeHTML)， Edge (Chromium)， Chrome, Firefox 42+)——> <input type="file" accept=".xls，.xlsx" />

应该提供一种过滤除.xls或.xlsx以外的文件的方法。虽然输入元素的MDN页面总是说它支持这个功能，但令我惊讶的是，在Firefox 42版之前，这个功能并不适用于我。这适用于IE 10+， Edge和Chrome。

所以，为了支持42岁以上的Firefox以及IE 10+、Edge、Chrome和Opera，我想最好使用逗号分隔的mime类型列表:

<！——(IE 10+， Edge (EdgeHTML)， Edge (Chromium)， Chrome, Firefox)——> < input type = "文件" 接受盾= "应用程序/ vnd.openxmlformats-officedocument.spreadsheetml.sheet、应用程序/。ms excel " / >

[Edge (EdgeHTML)行为:文件类型过滤器下拉菜单显示了这里提到的文件类型，但不是默认的下拉菜单。默认过滤器为“所有文件(*)”。

您还可以在mime类型中使用星号。例如:

W3C建议作者在accept属性中指定mime类型及其相应的扩展。所以，最好的方法是:

<！正确的方法:同时使用文件扩展名和相应的mime类型。--> <！——(IE 10+， Edge (EdgeHTML)， Edge (Chromium)， Chrome, Firefox)——> < input type = "文件" 接受= " xls, .xlsx、应用程序/ vnd.openxmlformats-officedocument.spreadsheetml.sheet盾应用程序/。ms excel " / >

JSFiddle是一样的:这里。

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请求上传文件。

2014-05-16 23:54:20