<input type ="file">按扩展名限制可选文件

Question

有人如何通过扩展名限制输入type ="file"元素可以选择的文件？

我已经知道了accept属性,但是在chrome中它确实通过最后定义的MIME类型限制文件(在本例中为"gif"),FF4甚至不限制任何内容.

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

我做错了吗？或者还有其他方式吗？

你的任何建议......

Answer 1

简单的方法是:

<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">

适用于所有浏览器,IE9除外.我还没有在IE10 +中测试过它.

Answer 2

注意:这个答案来自2011年.当时这是一个非常好的答案,但截至2015年,大多数浏览器都支持原生HTML属性,因此(通常)不需要在JS中实现这样的自定义逻辑.请参阅Edi的答案和文档.

在上传文件之前,您可以使用Javascript检查文件的扩展名,如果表单不匹配,则阻止提交表单.要上载的文件的名称存储在表单元素的"值"字段中.

这是一个简单的例子,只允许上传以".gif"结尾的文件:

<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.toLowerCase() == "gif") {
            return true;
        }
        else {
            alert("You must select a GIF file for upload");
            return false;
        }
    }
</script>

<form action="upload.aspx" enctype="multipart/form-data" onsubmit="return checkFile();">
    <input name="uploadFile" id="uploadFile" type="file" />

    <input type="submit" />
</form>

但是,这种方法并非万无一失.Sean Haddy是正确的,你总是想在服务器端检查,因为用户可以通过关闭javascript或在代码到达浏览器后编辑代码来打败你的Javascript检查.除了客户端检查之外,绝对检查服务器端.另外,我建议检查服务器端的大小,以便用户不会使用2 GB文件崩溃服务器(我不知道在客户端检查文件大小而不使用Flash或Java小程序或其他东西).

然而,使用我在这里给出的方法事先检查客户端仍然有用,因为它可以防止错误,并且对非严重恶作剧是一个小的威慑.

Answer 3

老实说,限制文件的最佳方法是在服务器端.人们可以在客户端上欺骗文件类型,以便在服务器传输时获取完整的文件名,解析出文件类型,然后返回消息通常是最好的选择.