HTML <input type ='file'>应用一个filter
<input type='file' name='userFile'> 现在，当我点击浏览button，浏览对话框将显示所有文件…如果我想过滤文件types可以说
- 只有图像或.png ＆ .jpg ＆ .gifs
- 只有office文件，如.doc ＆ .docx ＆ .pps
怎么做…
文件input控件上有一个“接受”属性，您可以在其中指定所需文件的types。 从我看到的，但是，许多浏览器喜欢忽略它 – 可以指定的文件types是MIMEtypes，所以严格正确的浏览器将不得不看每个文件，无论扩展名，看看它是一个图像（如果是的话，是什么types）。
更新：似乎Windows上的每个主要浏览器至less有一些版本现在提供至less一些accept属性的支持。 （即使IE支持它，从版本10开始）。但是，依靠IE8和9仍然不支持它。 一般来说，支持是有点参差不齐的。
- Chrome似乎有充分的支持。 它使用自己的内置types列表以及系统的…所以如果任何一个定义types，Chrome知道哪些文件显示。
- IE 10支持漂亮的文件扩展名，而且MIMEtypes不错。 它似乎只使用系统的MIMEtypes到扩展的映射，尽pipe…这基本上意味着如果用户的计算机上的东西没有注册这些具有正确的MIMEtypes的扩展，IE将不会显示这些MIMEtypes的文件。
- 歌剧似乎只支持MIMEtypes – 扩展实际上禁用filter – 和文件select器的用户界面吸引。 您必须select一个types才能查看该types的文件。
- Firefox似乎只支持一组有限的types，而忽略其他types以及扩展。
-
我没有Safari，也不打算下载它。如果有人能够certificateSafari的支持…部分支持Safari浏览器。 http://caniuse.com/#search=accept
您应该考虑添加属性，所以支持它的浏览器可以帮助用户更容易地find正确的文件。 但是我仍然build议你在文件被选中后检查文件名，并且如果上传了错误的扩展名的文件，则显示错误信息。
当然，肯定有服务器仔细检查文件是正确的types。 文件扩展名只是一个命名约定，可以很容易地被破坏。 即使我们可以信任浏览器（我们不能），即使它试图按照您的要求过滤东西（这可能不会），但是它确实certificate.doc文件确实是一个Word文件是旁边的零。
我想你正在寻找接受参数。 试试这个作品
<input type="file" accept="image/*" />
它应该使用MIME_type ：例如
<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
这将只接受*.xlsx文件types…
有关MIMEtypes列表，请查看以下链接：
http://www.bitsandpix.com/entry/microsoft-office-2007-2010-docx-xlsx-pptx-mime-type-to-avoid-the-zip-issue/
您无法控制可以select哪些文件，但是您可以在select文件后使用javascript读取文件名。 如果文件types错误，则可以显示警告和/或禁用提交button。 但是，请记住，您不能依赖扩展名来告诉您文件是否确实是正确的types。 它应该只被视为一种方式来帮助用户否则可能会浪费时间上传一个巨大的文件，然后才发现你不支持该文件types。
这里有一些示例代码来做到这一点。 它使用jQuery，但你也可以在普通的JavaScript中做同样的事情。
$(function() { $('#inputId').change( function() { var filename = $(this).val(); if ( ! /\.txt$/.test(filename)) { alert('Please select a text file'); } }); });
你可以使用JavaScript。 考虑到用JavaScript做这件事的重大问题是重置input文件。 那么，这限制只有JPG（对于其他格式，你将不得不改变MIMEtypes和幻数 ）：
<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上testing的。
有关MIMEtypes的完整列表，请参阅维基百科 。
有关幻数的完整列表，请参阅维基百科 。
您应该使用其中一个使用embedded式Flash 的插件 ，因为您无法使用纯JavaScript
我已经在文件过滤的大多数情况下为客户端validation提供了一个简单的方法。 其实很简单。 现在，在你尝试去实现这个之前，要明白服务器必须检查这个文件，因为在有人改变.js甚至是HTML的情况下，javascript和HTML过滤并不是一个确定的事情。 我并不包括所有的实际脚本，我喜欢用创造性思维来看待其他实现概念的简单事实，但是这些步骤似乎在我find一个更好的答案之前是行得通的：
创build一个查找input并处理它的js对象。
调用一个函数，比如AjaxControlToolKit的AsyncFileUpload控件的OnClientUploadComplete。
在这个函数里面，声明一个布尔variables：bIsAccepted（设置为false）和stringsFileName（从args获取文件名后）。
在if..else声明中，
if(sFilename.indexOf(".(acceptedExtension1)") || sFileName.indexOf(".(AcceptedExtension2)") ) { bIsAccepted = true; } else { bIsAccepted = false; }
然后
if(bIsAccepted) { //Process Data }
在服务器上，设置一个可接受的文件扩展名列表，并循环和处理类似，将使过程凝聚一致，有效地允许用户界面和代码隐藏在几乎所有情况下过滤文件types。
鉴于这可以通过更改名称以避免将不同的文件扩展名作为名称的一部分来绕过，在提交给服务器进行进一步处理之前，还应检查MIMEtypes。
[http://www.webmaster-toolkit.com/mime-types.shtml][1]
希望这可以帮助！
使用MVC，我们可以限制只上传到zip文件
.HtmlAttributes(new { accept = ".zip*" })
