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's answer和the docs。

在上传文件之前，您可以使用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

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

Answer 4

 function uploadFile() {
     var fileElement = document.getElementById("fileToUpload");
        var fileExtension = "";
        if (fileElement.value.lastIndexOf(".") > 0) {
            fileExtension = fileElement.value.substring(fileElement.value.lastIndexOf(".") + 1, fileElement.value.length);
        }
        if (fileExtension == "odx-d"||fileExtension == "odx"||fileExtension == "pdx"||fileExtension == "cmo"||fileExtension == "xml") {
         var fd = new FormData();
        fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener("progress", uploadProgress, false);
        xhr.addEventListener("load", uploadComplete, false);
        xhr.addEventListener("error", uploadFailed, false);
        xhr.addEve`enter code here`ntListener("abort", uploadCanceled, false);
        xhr.open("POST", "/post_uploadReq");
        xhr.send(fd);
        }
        else {
            alert("You must select a valid odx,pdx,xml or cmo file for upload");
            return false;
        }

      }

试过这个，效果很好

<input type =“file”/>通过扩展名限制可选文件

4 个答案: