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

Question

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

Answer 1

输入标记有Accept属性。然而，它在任何方面都不可靠。浏览器很可能将其视为“建议”，这意味着用户也将根据文件管理器的不同，拥有只显示所需类型的预选。他们仍然可以选择“所有文件”，并上传任何他们想要的文件。

例子：

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

阅读更多内容HTML 5规范

请记住，它仅用作用户查找正确文件的“帮助”。每个用户都可以向您的服务器发送他/她想要的任何请求。您总是必须验证所有服务器端。

所以答案是：不你，你们不能限制但是你能，会，可以设定一个预选，但你不可能依靠它。

另外，也可以通过使用JavaScript检查文件名(输入字段的值)来执行类似的操作，但这是胡说八道，因为它没有提供保护，也不方便用户选择。这只会让网站管理员以为他/她受到了保护，并打开了一个安全漏洞。对于具有替代文件扩展名(例如jpeg而不是jpg)、大写或没有任何文件扩展名(在Linux系统上是常见的)的用户来说，这可能是个麻烦。

Answer 2

您可以使用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 = '';

  }

};

<input type="file" id="someId" />