Question

jsbin

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

预计文件对话框仅接受png文件。但accept="image/png"不适用于Firefox。我该怎么做？附：它适用于Chrome。

Answer 1

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

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

Answer 2

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

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

<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部分尊重accept属性，您可以使用此代码，从Jukka K. Korpela的答案（谢谢！+1）复制和修改，并附加尊重原始项目接受属性，而不是用于PNG的juts，而不仅仅是一个扩展名。

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">

它不适用于mime类型或类似image/*的组（它只会忽略它们），但可以修改为每个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

任何主要浏览器都不支持正确“接受”属性对于表单验证，您应该使用php或javascript。

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

5 个答案: