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

问题描述

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

我引用了 www.w3schools.com/tags/att_input_accept.asp 及以下代码是我正在使用的代码，这对Chrome非常适用，但不会使用Firefox和IE浏览器。

请任何人都可以帮助我了解我必须做什么错误？

<$ p $下面使用accept =image / *< / h2>
< input type =filename =pic1accept =image / */>

< h2>以下我只需接受png< / h2>
< input type =filename =pic1accept =image / png/>

这是一个小提琴链接

解决方案

您需要通过Java脚本验证它。下面是Java脚本验证的代码：

$ p $ function CheckFileName（）{
var fileName = document.getElementById（uploadFile ）.value
if（fileName ==）{
alert（Browse to upload a valid File with png extension）;
返回false;
}
else if（fileName.split（。）[1] .toUpperCase（）==PNG）
return true;
else {
alert（File with+ fileName.split（。）[1] +无效，用png扩展名上传一个有效文件）;
返回false;
}
返回true;
}


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.

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.

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/

解决方案

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

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

这篇关于如何限制我的输入类型=“文件”只接受在Firefox中不工作的png图像文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！