HTML <INPUT TYPE =“文件”>应用过滤器

Question

<input type='file' name='userFile'> 

现在，当我将单击浏览按钮，浏览器对话框将显示所有文件...如果我要过滤的文件类型是什么让说

• 只有图像png格式 & 的.jpg & .gif文件
• 仅办公文件一样.DOC &个.DOCX & .PPS

怎么办呢？

Answer 1

文件输入控件上有一个“接受”属性，您可以在其中指定所需文件的类型。 尽管我看到许多浏览器都喜欢忽略它 - 可以指定的文件类型是MIME类型，所以严格正确的浏览器必须查看每个文件，而不管扩展名是否是图像（如果是的话，它是什么类型）。

更新：看来至少一些在Windows上每一个主要的浏览器版本，现在至少提供了accept属性一定支撑。 （即使IE支持它，从版本10开始）。但是，依靠它还有点早，因为IE 8和9仍然不支持它。一般来说，支持有点多。

• Chrome似乎有全力支持。它使用自己的内置类型列表以及系统的...因此，如果任何一个定义了类型，Chrome就知道要显示哪些文件。
• IE 10支持文件扩展名和MIME类型。它似乎只使用系统的MIME类型到扩展名的映射，尽管......这基本上意味着如果用户计算机上的某些东西没有使用正确的MIME类型注册这些扩展名，IE将不会显示这些MIME类型的文件。
• Opera似乎只支持MIME类型 - 扩展实际上禁用了筛选器 - 并且文件选择器的UI很糟糕。您必须选择一种类型才能查看该类型的文件。
• Firefox似乎只支持一组有限的类型，并忽略其他类型以及扩展。
• 我没有Safari，也不打算下载它。如果有人能够证明Safari的支持......部分支持safari。 http://caniuse.com/#search=accept

您应该考虑添加属性，所以支持它的浏览器可以帮助用户更容易地找到正确的文件。但是我仍然建议你在文件被选择后检查文件名，并且如果上传了错误扩展名的文件，则显示错误信息。

当然，肯定有服务器仔细检查文件是否是正确的类型。文件扩展名只是一种命名约定，可以很容易地被破坏。即使我们可以相信浏览器（我们不能），并且即使它确实试图按照您的要求过滤东西（它可能不会），但它实际验证该文件是真正的Word文档的机会接近于零。

Answer 2

您应该使用one of the plugins使用嵌入式闪存，因为你不能用普通做的JavaScript

Answer 3

你无法控制哪些文件可以选择，但你可以选择该文件后，用JavaScript读取的文件名。如果文件类型错误，则可以显示警告和/或禁用提交按钮。但是，请记住，您无法依赖扩展名来告诉您文件是否属于正确类型。只能将其视为一种方式，以帮助用户在发现您不支持该文件类型之前浪费时间上传大文件。

下面是一些示例代码来做到这一点。它使用jQuery，但你也可以在普通的JavaScript中做同样的事情。

$(function() { 
    $('#inputId').change(function() { 
     var filename = $(this).val(); 
     if (! /\.txt$/.test(filename)) { 
      alert('Please select a text file'); 
     } 
    }); 
}); 

Answer 4

我想你正在寻找accept参数。试试这个工作

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

Answer 5

应该使用MIME_type： 例如

<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" /> 

这将只接受*.xlsx文件类型...

对于MIME类型列表中，点击下方的链接：
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/

Answer 6

我做了一个简单的方法f或者大多数情况下文件过滤的客户端验证。其实很简单。现在，在你去尝试实现这个之前，要明白服务器必须检查这个文件，因为在有人改变.js甚至是HTML时，javascript和HTML过滤并不是一个确定的事情。 我不包括所有简单的事实，我喜欢看到其他实现使用创意思维的概念的实际脚本的，但这些都是我所采取的似乎工作，直到我找到一个更好的答案的步骤：

创建一个查找输入并处理它的js对象。

调用一个函数，如OnClientUploadComplete为AjaxControlToolKit的AsyncFileUpload控制。

在这个函数中，声明一个布尔变量：bIsAccepted（设置为false）和字符串sFileName（获得从ARGS在文件名后）。

在if..else语句，

if(sFilename.indexOf(".(acceptedExtension1)") || 
    sFileName.indexOf(".(AcceptedExtension2)")) 
{ 
    bIsAccepted = true; 
} 
else 
{ 
    bIsAccepted = false; 
} 

然后

if(bIsAccepted) 
{ 
//Process Data 
} 

在服务器上，设置接受的文件扩展名列表和循环，并通过类似的处理会使进程凝聚力并保持一致，有效地允许用户界面和代码隐藏在几乎所有情况下过滤文件类型。

鉴于这可以通过改变有不同的文件扩展名作为名称的一部分的名字被绕过，MIME类型也应该提交到服务器进行进一步处理前检查。

  [http://www.webmaster-toolkit.com/mime-types.shtml][1] 

希望这有助于！

Answer 7

使用MVC我们可以限制上传的zip文件只

.HtmlAttributes(new { accept = ".zip*" }) 

Answer 8

你可以使用JavaScript。考虑到使用JavaScript做这件事的最大问题是重置输入文件。那么，这个规定只有JPG（对于其它格式，你将不得不改变mime type和magic number）：

<form id="form-id"> 
    <input type="file" id="input-id" accept="image/jpeg"/> 
</form> 

<script type="text/javascript"> 
    $(function(){ 
     $("#input-id").on('change', function(event) { 
      var file = event.target.files[0]; 
      if(file.size>=2*1024*1024) { 
       alert("JPG images of maximum 2MB"); 
       $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
       return; 
      } 

      if(!file.type.match('image/jp.*')) { 
       alert("only JPG images"); 
       $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
       return; 
      } 

      var fileReader = new FileReader(); 
      fileReader.onload = function(e) { 
       var int32View = new Uint8Array(e.target.result); 
       //verify the magic number 
       // for JPG is 0xFF 0xD8 0xFF 0xE0 (see https://en.wikipedia.org/wiki/List_of_file_signatures) 
       if(int32View.length>4 && int32View[0]==0xFF && int32View[1]==0xD8 && int32View[2]==0xFF && int32View[3]==0xE0) { 
        alert("ok!"); 
       } else { 
        alert("only valid JPG images"); 
        $("#form-id").get(0).reset(); //the tricky part is to "empty" the input file here I reset the form. 
        return; 
       } 
      }; 
      fileReader.readAsArrayBuffer(file); 
     }); 
    }); 
</script> 

采取在考虑到这是在Firefox和Chrome的最新版本进行测试，并在IEXPLORE 10。

For a complete list of mime types see Wikipedia。

For a complete list of magic number see Wikipedia。