html - 将文件拖放到其中时，文件字段 "accept"属性无法正常工作

Question

我有这样的文件字段:

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

当我单击并选择文件时它可以正常工作，但当我将文件拖放到其中时它接受所有类型的文件。

有什么想法吗？

仅供引用:我已通过添加服务器端验证来解决此问题。

Answer 1

accept 参数用于让浏览器知道它应该向操作系统询问一个文件选择器对话框，它只接受这些类型的文件。

所以这实际上是一个操作系统功能。

现在，当您拖放文件时，浏览器不需要打开文件选择器对话框，因此不使用此属性。

但您仍然可以收听更改事件并在那里进行检查。

inp.onchange = function(e){
  e.preventDefault();
  var file = this.files[0];
  if(file.type.indexOf('image/') !== 0) {
    this.value = null;
    console.log("invalid");
  }
  else {
    console.log('valid file');
  }
}

Drop a file on this input. <br>
<input type="file" accepts="image/*" id="inp">

重要提示

• accepts，就像 MIME 类型检查只针对文件扩展名进行，即很容易被欺骗，你可以试试 magic-number check ，但无论如何你都应该从服务器上检查。
• 仅当您的用户上传单个文件时，上述代码段才有效。如果他们上传一个文件夹或多个文件，我不知道你想做什么，但要注意他们能够做到，因此你必须处理这些情况。