在使用<input type =“file”>时限制文件格式？
当用户单击HTML中的<input type="file">元素中的Browse按钮时，我想限制可以从本机OS文件选择器中选择的<input type="file"> 。 我有一种感觉是不可能的，但我想知道是否有解决方案。 我想只保留HTML和JavaScript; 没有Flash请。
严格来说，答案是否定的 。 开发人员无法阻止用户在本机操作系统文件选择对话框中选择任何类型或扩展名的文件。
但是， <input type = "file">的acccept属性可以帮助在OS的文件选择对话框中提供一个过滤器。 例如，
<!-- (IE 10+, Edge, Chrome, Firefox 42+) --> <input type="file" accept=".xls,.xlsx" />
输入标签有accept属性。 但是，这是不可靠的。 浏览器很可能将其视为“建议”，这意味着用户也将根据文件管理器进行预选，只显示所需的类型。 他们仍然可以选择“所有文件”并上传他们想要的任何文件。
例：
<form> <input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" /> </form>
阅读更多的HTML5规范
请记住，它只是作为帮助用户找到正确的文件。 每个用户可以发送他/她想要的任何请求到您的服务器。 你总是必须验证服务器端的一切。
所以答案是： 不，你不能限制 ，但你可以设置一个预选，但你不能依靠它。
另外或者你也可以通过使用JavaScript来检查文件名（输入字段的值）来做类似的事情，但是这是无稽之谈，因为它没有提供任何保护，也不能简化用户的选择。 它只能欺骗网站管理员认为他/她受到保护，并打开一个安全漏洞。 如果用户有替代的文件扩展名（例如jpeg而不是jpg），大写字母，或者没有任何文件扩展名（这在Linux系统上是常见的），那么这可能会让用户感到痛苦。
您可以使用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=''; } };
你是对的。 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>
从技术上讲，你可以在input元素上指定accept属性 （ html5中的替代），但是它不被支持。
我知道这有点晚了。
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; }
使用带有accept属性的input标签
<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屏幕抓取
你实际上可以用javascript来做，但记得js是客户端，所以如果你想避免（限制或限制你所说的）特定类型的文件，你应该“警告用户”他们可以上传什么类型的文件做服务器端。
看看这个基本的tut，如果你想开始服务器端验证。 对于整个教程访问此页面 。
祝你好运！
正如在前面的答案中提到的，我们不能限制用户只为给定的文件格式选择文件。 但是在html中使用文件属性的accept标签真的很方便。
至于验证，我们必须在服务器端完成。 我们也可以在js的客户端做，但不是一个万无一失的解决方案。 我们必须在服务器端进行验证。
对于这些要求，我真的更喜欢struts2 Java Web应用程序开发框架。 有了它的内置文件上传功能，上传文件到基于struts2的网络应用程序是一个小菜一碟。 只要提到我们想要在我们的应用程序中接受的文件格式，其余的都由框架本身的核心来处理。 你可以在struts官方网站查看。
