通过扩展名限制可选文件[重复]

Question

此问题已经在这里有了答案：

• Limit file format when using <input type=“file”>?9个答案

有人如何限制可以使用扩展名输入type =“ file”元素选择的文件？

我已经知道accept属性，但是在chrome中，它确实通过最后定义的MIME类型（在这种情况下为“ gif”）限制了文件，而FF4甚至没有任何限制。

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

我做错了什么还是有其他方法吗？

Answer 1

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

Answer 2

简单的方法是：

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

适用于除IE9以外的所有浏览器。我尚未在IE10 +中对其进行测试。

Answer 3

注意：这个答案来自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或在代码到达浏览器后对其进行编辑来破坏Java代码检查。除了客户端检查外，还肯定检查服务器端。此外，我也建议您检查服务器端的大小，以免用户使用2 GB的文件使服务器崩溃（我知道如果不使用Flash或Java小程序，就无法在客户端检查文件大小） ）。

但是，使用我在这里给出的方法事先检查客户端仍然很有用，因为它可以防止出错，并且对不严重的恶作剧具有较小的威慑力。

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

      }

尝试过这个，效果很好