【问题标题】:Input accept="image/png" is not working in Firefox输入 accept="image/png" 在 Firefox 中不起作用
【发布时间】:2015-06-10 12:49:19
【问题描述】:

jsbin

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

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

【问题讨论】:

  • 我们快到 2015 年了,一些浏览器不能正确支持 accept。这很尴尬。

标签: javascript html firefox


【解决方案1】:

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

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

【讨论】:

  • 无论如何都应该执行服务器端检查。
  • @JukkaK.Korpela,100% 同意,但这并不能解决 OP 的问题,并且可能会导致不必要的流量,可以使用 javascript 缓解。
  • 除了验证问题之外,还有一个用户体验问题,即用户可能必须浏览许多文件才能找到要上传的文件,而不是过滤掉正确的文件。
  • 该问题将在 Firefox 37 发布时得到修复 - 预计 2015 年 4 月。
【解决方案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 被禁用的情况可能很少见。

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

【讨论】:

  • 谢谢,正是我需要的。我修改了您的代码以检查原始接受属性中列出的所有扩展名并发布了另一个答案(提及您的)。
【解决方案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]

【讨论】:

    【解决方案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
    

    【讨论】:

      【解决方案5】:

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

      【讨论】:

      • 这是一个真正具有误导性的答案。w3schools 另有说法
      • @sushain97,如果您阅读我的回答,您会发现在这种情况下 w3schools 实际上是正确的,并且确实支持此属性,但并非适用于所有文件扩展名。由于 chrome 和 IE 以及 FF 中的某些扩展都支持它,这使得这个答案非常具有误导性。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-01-20
      • 2016-09-15
      • 2015-11-26
      • 2016-07-23
      • 2018-11-07
      • 1970-01-01
      • 2021-08-02
      相关资源
      最近更新 更多