使用<inputtype=“file”>时限制文件格式？

Question

使用<inputtype=“file”>时限制文件格式？

当用户单击“浏览”按钮时，我希望限制可以从本机OS文件选择器中选择的文件类型。<input type="file">元素在HTML中。我有种感觉这是不可能的，但我想知道是一个解决办法。我只想保留HTML和JavaScript，请不要使用Flash。

Answer 1

输入标记有Accept属性。然而，它在任何方面都不可靠。浏览器很可能将其视为“建议”，这意味着用户也将根据文件管理器的不同，拥有只显示所需类型的预选。他们仍然可以选择“所有文件”，并上传任何他们想要的文件。例子：<form> &nbsp;&nbsp;<input&nbsp;type="file"&nbsp;name="pic"&nbsp;id="pic"&nbsp;accept="image/gif,&nbsp;image/jpeg"&nbsp;/></form>阅读更多内容HTML 5规范请记住，它仅用作用户查找正确文件的“帮助”。每个用户都可以向您的服务器发送他/她想要的任何请求。您总是必须验证所有服务器端。所以答案是：不你，你们不能限制但是你能，会，可以设定一个预选，但你不可能依靠它。另外，也可以通过使用JavaScript检查文件名(输入字段的值)来执行类似的操作，但这是胡说八道，因为它没有提供保护，也不方便用户选择。这只会让网站管理员以为他/她受到了保护，并打开了一个安全漏洞。对于具有替代文件扩展名(例如jpeg而不是jpg)、大写或没有任何文件扩展名(在Linux系统上是常见的)的用户来说，这可能是个麻烦。

Answer 2

您可以使用change事件，以监视用户选择的内容，并在此时通知他们该文件不可接受。它不限制所显示的文件的实际列表，但它是您可以做的最接近客户端的文件，除了不受支持的文件。accept属性。var file = document.getElementById('someId');file.onchange = function(e) {&nbsp; var ext = this.value.match(/\.([^\.]+)$/)[1];&nbsp; switch (ext) {&nbsp; &nbsp; case 'jpg':&nbsp; &nbsp; case 'bmp':&nbsp; &nbsp; case 'png':&nbsp; &nbsp; case 'tif':&nbsp; &nbsp; &nbsp; alert('Allowed');&nbsp; &nbsp; &nbsp; break;&nbsp; &nbsp; default:&nbsp; &nbsp; &nbsp; alert('Not allowed');&nbsp; &nbsp; &nbsp; this.value = '';&nbsp; }};<input type="file" id="someId" />