输入 accept="image/png" 在 Firefox 中不起作用

Question

jsbin

<input type="file" accept="image/png">

文件对话框应该只接受 png 文件。但是accept="image/png" 不适用于 Firefox。我怎样才能做到？ 附言它适用于 Chrome。

Answer 1

显然，某些扩展类型存在特定于 Firefox 的问题。您可以阅读有关此错误的更多信息here。

这个错误的最新更新是几个月前的，它似乎还没有解决。目前，我建议在服务器端进行文件检查，或者至少您可以在文件上传之前使用 JavaScript 来验证文件的扩展名。

Answer 2

正如其他答案所描述的，Firefox 还不支持type="image/png"。相反，它会忽略该属性并且不应用任何文件过滤器。使用type="image/*" 可以，但过滤器将允许所有图像文件。

也许最好的实际解决方法是使用检查文件扩展名的 JavaScript 代码。它并不能真正证明什么，但几乎 100% 确定，PNG 文件的名称以 .png 结尾，而其他文件则没有。示例代码（将粗鲁的alert 替换为适合您的UI 设计的函数）：

<form action="..."
enctype=multipart/form-data method=post
onsubmit="return checkPNG(document.getElementById('img'))">
<label for=img>Your image (.png):</label>
<input type=file id=img name=img accept=
"image/png, .png" onchange="return checkPNG(this)">
<input type=submit value=Send>
</form>
<div id=f></div>
<script>
function checkPNG(el) {
  if(el.value) {
    var parts = el.value.split('.');
    if(parts[parts.length - 1].toLowerCase() === 'png') {
      return true;
    } else {
      alert('Please specify a PNG file.');
      return false;
    }
  } else {
    return true;
  }
}
</script>

缺点是当脚本关闭时，Firefox 将接受任何文件，即使accept="image/*" 至少会将文件限制为图像文件。然而，与将不同的type 属性提供给不同的浏览器所需的浏览器嗅探相比，JavaScript 被禁用的情况可能很少见。

在对文件进行任何操作之前，您自然应该检查服务器上的文件类型，因为任何文件类型的过滤都很容易被绕过，无论是意外还是故意-

Answer 3

要使 Firefox 部分尊重接受属性，您可以使用此代码，从 Jukka K. Korpela 的答案复制和修改（谢谢！+1），另外还有尊重原始项目接受属性的额外好处，而不是 PNG 的突出部分，不只是一个扩展。

function checkFileExt(el) {
    var accept=el.getAttribute("accept");
    if(el.value && el.value!="" && accept && accept!="") {
        var parts = el.value.split('.');

        if(parts.length==1) {
            alert("File with no extension: '"+el.value+"'. Allowed: "+accept);
            return false;
        }

        var ext=parts[parts.length - 1].toLowerCase();

        accept=accept.split(',');
        var found=false;
        for(var i=0;i<accept.length;i++) {
            if("."+ext==accept[i]) {
                found=true;
                break;
            }
        }
        if(found) {
            return true;
        } else {
            alert("Wrong file: '"+el.value+"'. Allowed: "+accept);
            return false;
        }
    } else {
        return true;
    }
}

你可以这样使用它：

<input name="fle_txt" value="" accept=".txt,.doc,.docx,.xls,.xlsx" onchange="checkFileExt(this);" type="file">

它不适用于像 image/* 这样的 mime 类型或组（它只会忽略它们），但可以修改为每个 mime 类型添加扩展列表 [比如将 .jpg,.jpeg 附加到数组 accept如果在其中找到image/jpeg]

Answer 4

Read Mozilla Doc here 目前并非所有浏览器都支持特定的文件扩展，但它们都支持一种文件类型，例如图像/视频。

accept
If the value of the type attribute is file, this attribute indicates the types of files that the server accepts; otherwise it is ignored. The value must be a comma-separated list of unique content type specifiers:
A valid MIME type with no extensions
audio/* representing sound files HTML5
video/* representing video files HTML5
image/* representing image files HTML5

Answer 5

'accept' 属性未被任何主流浏览器正确支持。
对于表单验证，您应该使用 php 或 javascript。