如何限制我的输入类型=“文件”只接受PNG图像文件不能在Firefox工作(How to restr

我使用的输入类型=“文件”，现在，我的要求是，我只是想选择PNG图像，也就是当我选择浏览“PNG”过滤器将应用于。

我刚才提到www.w3schools.com/tags/att_input_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" /> 

这里是一个小提琴链接到它http://jsfiddle.net/Jcgja/2/

Answer 1:

您需要通过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;
    }

Answer 2:

W3Schools的那页上的浏览器支持的信息是不正确的。

如果选中该页面中，您将看到accept属性它没有在Firefox中实现：

https://developer.mozilla.org/en/HTML/Element/Input

更新：
在accept属性现在在Firefox中实现，但没有一个最新版本谁还是用户不会得到大家的支持。

Answer 3:

正如你所看到的，“接受”属性不正确任何主流浏览器的支持。 你可以使用的形式onsubmit事件一JavaScript验证，以验证文件类型是正确的，返回否则为false。

不要使用此属性作为验证工具。 文件上传应在服务器上进行验证。

Answer 4:

<?php
if ((($_FILES["pic1"]["type"] == "image/png")
{
if ($_FILES["pic1"]["error"] > 0)
{
echo "Error: " . $_FILES["pic1"]["error"] . "<br />";
}
else
{
echo "Upload: " . $_FILES["pic1"]["name"] . "<br />";
echo "Type: " . $_FILES["pic1"]["type"] . "<br />";
echo "Size: " . ($_FILES["pic1"]["size"] / 1024) . " Kb<br />";
echo "Stored in: " . $_FILES["pic1"]["tmp_name"];
}
}
else
{
echo "Invalid file";
}
?>

这是文件的类型正好验证。 不是整个上传脚本。

Answer 5:

您可以使用文件功能的JavaScript函数onChane事件

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;
    }
}

Answer 6:

正如在评论中指出，接受的解决方案将无法与几个文件名工作“” 在里面。 这应该更好地处理它，它更是bug的论证和灵活， 您可以通过编辑阵列管理接受的扩展 。

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;
    }
}

文章来源: How to restrict my input type=“file” to accept only png image files not working in Firefox