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

【问题标题】：How to restrict my input type="file" to accept only png image files not working in Firefox如何限制我的输入类型=“文件”只接受在 Firefox 中不起作用的 png 图像文件
【发布时间】：2012-05-10 01:16:43
【问题描述】：

我使用的是输入类型=“文件”，现在我的要求是我只想选择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/

【问题讨论】：

w3fools 会告诉你为什么 w3schools 不是所有网络事物的最佳资源。
您需要对文件类型进行服务器端验证。我认为在所有浏览器中没有办法做到这一点。
w3schools 的问题在于它们出现在谷歌的前列结果中，所以大多数人都去那里。
@Oded 感谢您引导我到这样一个信息丰富的网站，我花了将近一个小时，现在回到问题：P
我相信你已经得到了一些答案......大多数浏览器都不支持该功能。

标签： html input

【解决方案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;
    }

【讨论】：

如果文件有多个点，此解决方案将失败。例如：myfile.png.jpg 文件将是有效的，而 myfile.jpg.png 将是无效文件。

【解决方案2】：

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

如果您检查此页面，您会看到 accept 属性在 Firefox 中没有实现：

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

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

【讨论】：

这不再是实际的了，从 Firefox 16 开始支持它

【解决方案3】：

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

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

【讨论】：

【解决方案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";
}
?>

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

【讨论】：

【解决方案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;
    }
}

【讨论】：

【解决方案6】：

正如 cmets 中所指出的，已接受的解决方案不适用于带有多个“.”的文件名。在里面。这应该可以更好地处理它，它更能防错且更灵活，并且您可以通过编辑数组来管理接受的扩展。

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

【讨论】：