如何在HTML上传框中限制文件类型？

Question

我在网上四处看看但找不到解决方案。 但我发现当我们将文件上传到Flickr时 文件对话框自动过滤文件类型，如何制作？

Answer 1

你无法获得其他答案中提到的a的.value属性。出于安全原因，它受到限制。

还有一个'accept'属性可能很方便，例如：

<input type="file" name="picture" accept="image/gif, image/jpeg, image/jpg" />

我不确定它在各种浏览器中的支持程度如何。

但是，您可以使用其他技术（如java或flash）创建自己的上传组件。

Answer 2

您可以解析此输入的.value属性，并使用substr()方法检查文件扩展名（即最后3个字母=='png'等）

要执行更复杂的检查，您必须在服务器端执行此操作。

修改 这是一个jQuery代码，可以帮助您：

<script type="text/javascript">
    var Checker = {
        Extensions: ["jpg", "png", "gif", "bmp"],

        Validate: function(objid)
        {
            return jQuery.inArray(objid.value.substr(objid.value.length - 3, 3), Checker.Extensions) > -1;
        }
    };

    $(document).ready(function(){
        $('#submitButton').click(function(){
            if (Checker.Validate($('#selectFile')[0]))
            {
                alert("OK, we can submit!");
            } else {
                alert("This file type is not supported. \n Supported file types are: " 
                + Checker.Extensions.join(", "));
            }
        });
    });
</script>
<input type="file" id="selectFile" />
<input type="button" id="submitButton" value="Submit" />

注意：accept属性在主流浏览器上无法正常运行，因此javascript解决方案最好，但请记得再次检查服务器端的文件。