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

Question

当用户单击<input type="file">HTML 中元素中的"浏览"按钮时,我想限制可从本机OS文件选择器中选择的文件类型.我有一种感觉,这是不可能的,但我想知道是否有是一个解决方案.我想完全依赖于HTML和JavaScript; 请不要闪光.

Answer 1

严格来说,答案是否定的.开发人员无法阻止用户在本机OS文件选择对话框中选择任何类型或扩展名的文件.

但仍然,accept属性<input type = "file">可以帮助在OS的文件选择对话框中提供过滤器.例如,

<!-- (IE 10+, Edge, Chrome, Firefox 42+) -->
<input type="file" accept=".xls,.xlsx" />

应该提供一种过滤除.xls或.xlsx以外的文件的方法.尽管元素的MDN页面input始终表示它支持这一点,但令我惊讶的是,这在Firefox版本42中对我不起作用.这适用于IE 10 +,Edge和Chrome.

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

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

[ 边缘行为:文件类型过滤器下拉列表显示此处提到的文件类型,但不是下拉列表中的默认值.默认过滤器是All files (*).]

您还可以在MIME类型中使用星号.例如:

<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类型和相应的扩展名.所以,最好的方法是:

<!-- 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相同:这里.

参考: MIME类型列表

重要信息:使用accept属性仅提供过滤不感兴趣类型的文件的方法.浏览器仍然允许用户选择任何类型的文件.应该进行额外的(客户端)检查(使用JavaScript,一种方式是这样),并且必须在服务器上验证文件类型,使用MIME类型的组合同时使用文件扩展名及其二进制签名(ASP) .NET,PHP,Ruby,Java).您可能还想参考这些 表中的文件类型及其幻数,以执行更强大的服务器端验证.

这里有三个 关于文件上传和安全性的好 读物.

编辑: 可能使用其二进制签名进行文件类型验证也可以使用HTML(而不是仅仅通过查看扩展名)在客户端使用HTML5文件API完成,但仍然必须在服务器上验证该文件,因为恶意用户仍然可以通过发出自定义HTTP请求来上传文件.

Answer 2

输入标记有accept属性.但是,它在任何方面都不可靠.浏览器最有可能将其视为"建议",这意味着用户将根据文件管理器进行预选,仅显示所需类型.他们仍然可以选择"所有文件"并上传他们想要的任何文件.

例:

<form>
    <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />
</form>

在html5规范中阅读更多内容

请记住,它只是用作"帮助",以便用户找到正确的文件.每个用户都可以向服务器发送他/她想要的任何请求.你总是必须验证服务器端的一切.

所以答案是:不,你不能限制,但你可以设置预选,但你不能依赖它.

或者或另外,您可以通过使用JavaScript检查文件名(输入字段的值)来执行类似操作,但这是无稽之谈,因为它不提供保护,也不会简化用户的选择.它只会欺骗网站管理员认为他/她受到保护并打开安全漏洞.对于具有替代文件扩展名(例如jpeg而不是jpg),大写或没有任何文件扩展名的用户来说,这可能是一种痛苦(在Linux系统中很常见).

Answer 3

您可以使用该change事件来监视用户选择的内容,并在此时通知他们该文件不可接受.它不限制显示的实际文件列表,但除了支持不良的accept属性外,它是客户端最接近的文件.

var file = document.getElementById('someId');

file.onchange = function(e) {
  var ext = this.value.match(/\.([^\.]+)$/)[1];
  switch (ext) {
    case 'jpg':
    case 'bmp':
    case 'png':
    case 'tif':
      alert('Allowed');
      break;
    default:
      alert('Not allowed');
      this.value = '';
  }
};

例如http://www.jsfiddle.net/gaby/7br93/1/

Answer 4

是的,你是对的.使用HTML是不可能的.用户可以选择他/她想要的任何文件.

您可以编写一段JavaScript代码,以避免根据其扩展名提交文件.但请记住,这绝不会阻止恶意用户提交他/她真正想要的任何文件.

就像是:

function beforeSubmit()
{
    var fname = document.getElementById("ifile").value;
    // check if fname has the desired extension
    if (fname hasDesiredExtension) {
        return true;
    } else {
        return false;
    }
}

HTML代码:

<form method="post" onsubmit="return beforeSubmit();">
    <input type="file" id="ifile" name="ifile"/>
</form>

Answer 5

您可以使用“接受”属性作为文件选择框中的过滤器。使用“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 属性中使用逗号（ , ）作为“或运算符”。例如，要允许所有类型的图像或 pdf 文件，我们可以使用以下代码：

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

Answer 6

从技术上讲,您可以在元素上指定accept属性(在html5中替代)input,但是它没有得到适当的支持.

Answer 7

使用input带accept属性的标签

<input type="file" name="my-image" id="image" accept="image/gif, image/jpeg, image/png" />

单击此处获取最新的浏览器兼容性表

现场演示在这里

要仅选择图像文件,您可以使用它 accept="image/*"

<input type="file" name="my-image" id="image" accept="image/*" />

现场演示在这里

只显示gif,jpg和png,屏幕抓取来自Chrome 44版

Answer 8

我知道这有点晚了.

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;
}

Answer 9

你实际上可以用javascript来做但是记住js是客户端,所以你实际上是"警告用户"他们可以上传什么类型的文件,如果你想要AVOID(限制或限制你说)某些类型的文件你必须做服务器端.

如果您想开始使用服务器端验证,请查看此基本内容.有关整个教程,请访问此页面.

祝好运!

Answer 10

正如前面的答案中提到的，我们不能限制用户只为给定的文件格式选择文件。但是在html中的文件属性上使用accept标签真的很方便。

至于验证，我们必须在服务器端进行。我们也可以在客户端用 js 来做，但这不是一个万无一失的解决方案。我们必须在服务器端进行验证。

对于这些需求，我真的更喜欢 struts2 Java web 应用程序开发框架。凭借其内置的文件上传功能，将文件上传到基于 struts2 的网络应用程序是小菜一碟。只需提及我们希望在我们的应用程序中接受的文件格式，其余的都由框架本身的核心处理。您可以在 struts 官方网站上查看。