Html 如何限制我的输入类型="；文件"；仅接受不在Firefox中工作的png图像文件

我使用的是input type=“file”，现在我的要求是我只想选择png图像，也就是说，当我选择浏览时，应该应用一个“png”过滤器

我已经参考了

www.w3schools.com/tags/att\u input\u accept.asp

，下面是我正在使用的代码，这对Chrome很好，但对Firefox和IE不起作用

谁能帮我弄明白我肯定做错了什么

 <h2>Below uses accept="image/*"</h2>
 <input type="file" name="pic1" accept="image/*" /> 

 <h2>Below I need to accept only for png</h2>
 <input type="file" name="pic1" accept="image/png" /> 

下面的

使用accept=“image/*”
下面我只需要接受png

---

​这里有一个指向它的链接

正如您所看到的，任何主要浏览器都不支持“accept”属性。您可以对表单onsubmit事件使用javascript验证来验证文件类型是否正确，否则返回false

---

不要将此属性用作验证工具。应在服务器上验证文件上载。

该页的浏览器支持信息不正确

如果查看此页面，您会看到

accept

属性在Firefox中没有实现：

更新：

---

accept

属性现在已经在Firefox中实现，但是没有最新版本的用户仍然无法获得支持。

您需要通过java脚本对其进行验证。下面是java脚本验证的代码

function CheckFileName() {
        var fileName = document.getElementById("uploadFile").value
        if (fileName == "") {
            alert("Browse to upload a valid File with png extension");
            return false;
        }
        else if (fileName.split(".")[1].toUpperCase() == "PNG")
            return true;
        else {
            alert("File with " + fileName.split(".")[1] + " is invalid. Upload a validfile with png extensions");
            return false;
        }
        return true;
    }

---

您可以在文件函数的CHANE事件上使用javascript函数

filesChange() {
        checkFile();
        } 
<script type="text/javascript">
function checkFile() {
    var fileElement = document.getElementById("uploadFile");
    var fileExtension = "";
    if (fileElement.value.lastIndexOf(".") > 0) {
        fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
    }
    if (fileExtension == "gif") {
        return true;
    }
    else {
        alert("You must select a GIF file for upload");
        return false;
    }
}

filechange（）{
检查文件（）；
} 
函数检查文件（）{
var fileElement=document.getElementById（“上传文件”）；
var fileExtension=“”；
如果（fileElement.value.lastIndexOf（“.”）大于0）{
fileExtension=fileElement.value.substring（fileElement.value.lastIndexOf（“.”+1，fileElement.value.length）；
}
如果（文件扩展名=“gif”）{
返回true；
}
否则{
警报（“您必须选择要上载的GIF文件”）；
返回false；
}
}

正如评论中所指出的，已接受的解决方案不能与包含多个“.”的文件名一起使用。这将更好地处理它，它更能防止错误和灵活，并且您可以通过编辑数组来管理可接受的扩展

function checkFileExtension() {
    var fileName = document.getElementById("uploadFile").value;

    if(!fileName)
      return false;

    var extension = fileName.split(".");
    if(extension && extension.length > 1){
        extension = [extension.length-1].toUpperCase();
        if (["PNG"].indexOf(extension) != -1)
            return true;
        else{
            alert("Browse to upload a valid File with png extension");
            return false;
        }
    }
    else{
        alert("Browse to upload a valid File with png extension");
        return false;
    }
}

将告诉您为什么w3schools不是所有web内容的最佳资源。您需要对文件类型进行服务器端验证。我不认为在所有浏览器中都有这样做的方法。w3schools的问题是，它们在谷歌的搜索结果中名列前茅，所以大多数人都会去那里。@Oded感谢你引导我访问这样一个信息丰富的网站，我花了将近一个小时在上面，现在回到问题上来：我相信你得到了一些答案。。。大多数浏览器不支持该功能。这不再是实际的，因为Firefox 16支持该功能。如果一个文件有多个点，此解决方案将失败。例如：myfile.png.jpg文件将有效，而myfile.jpg.png文件将无效。
function checkFileExtension() {
    var fileName = document.getElementById("uploadFile").value;

    if(!fileName)
      return false;

    var extension = fileName.split(".");
    if(extension && extension.length > 1){
        extension = [extension.length-1].toUpperCase();
        if (["PNG"].indexOf(extension) != -1)
            return true;
        else{
            alert("Browse to upload a valid File with png extension");
            return false;
        }
    }
    else{
        alert("Browse to upload a valid File with png extension");
        return false;
    }
}