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

Question

我有这样的文件字段：

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

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

有什么想法吗？

仅供参考：我已通过添加服务器端验证解决了这个问题。

Answer 1

accept 参数用于让浏览器知道它应该向 OS 询问 文件选择器对话框 将只接受这些类型的文件。

所以这实际上是一个 OS 功能。

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

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

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，但无论如何您应该始终从服务器进行检查。
只有当您的用户上传了单个文件时，上面的代码片段才有效。如果他们上传一个文件夹或多个文件，我不知道你想做什么，但要注意他们能够做到，因此你将不得不处理这些情况。

Answer 2

上面的回答并没有真正回答问题，它没有使用接受值，它只是验证图像。如果接受值类似于 'text/plain'，它将失败。

您可以使用此验证函数来验证接受字符串上的文件类型：

verifyAccept = function( file-type, accept ) {
    var type-regex = new RegExp( accept.replace( /\*/g, '.\*' ).replace( /\,/g, '|' ) );
    return type-regex.test( file-type );
}

此处提到：Check selected file matches accept attribute on an <input> tag

Answer 3

您可能会考虑使用 attr-accept 等库（或复制其代码）来验证丢弃的文件是否与您的 accept="..." 尽可能接近浏览器的本机验证。

例如：当您单击“选择文件”而不是删除时，它将根据 accept="image/*,application/pdf").

进行验证

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

File field "accept" attribute not working properly when drag and drop file into it

html

forms

form-fields