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

I am using input type="file", Now my requirement is that I only want to select png images, that is when I select browse a "png" filter should be applied.

我使用的是input type="file"，现在我的要求是我只需要选择png图像，也就是当我选择browse时应该使用"png"过滤器。

I have referred www.w3schools.com/tags/att_input_accept.asp and below is the code I am using, this works fine with Chrome but does not work with Firefox and IE.

我已经引用了www.w3schools.com/tags/att_input_accept.asp，下面是我正在使用的代码，这在Chrome上很好用，但在Firefox和IE上行不通。

Please can anyone help me understand what wrong I must be doing ?

谁能帮我理解我做错了什么吗?

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

Here is a fiddle link to it http://jsfiddle.net/Jcgja/2/

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

6 个解决方案

#1

You need to validate it through java script. Below is the code for java script validation

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

#2

The browser support information on that page of w3schools is not correct.

w3schools页面上的浏览器支持信息不正确。

If you check this page, you see that the accept attribute it's not implemented in Firefox:

如果您检查这个页面，您会看到它在Firefox中没有实现的accept属性:

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

Update:
The accept attribute is now implemented in Firefox, but users who don't have a recent version still won't have the support.

更新:accept属性现在在Firefox中实现，但是没有最近版本的用户仍然得不到支持。

#3

As you can see, the 'accept' attribute is not properly supported by any of the major browsers. You could use a javascript validation on the form onsubmit event to verify if the file type is correct, returning false otherwise.

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

Do not use this attribute as a validation tool. File uploads should be validated on the server.

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

#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";
}
?>

This is just the validation of the type of file. Not the whole upload script.

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

#5

you can use javascript function onChane event of a file function

可以使用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;
    }
}

#6

As pointed out in the comments, accepted solution won't work with a file name with several "." in it. This should handle it better, it is more bug-proof and flexible, and you can manage accepted extensions by editing the array.

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

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

#1