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

如何通过扩展来限制可以使用 input type = “ file”元素选择的文件？

我已经知道接受属性，但是在 chrome 中它确实通过最后定义的 MIME 类型(在本例中是“ gif”)限制文件，而 FF4甚至没有限制任何东西。

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

我做错什么了吗，还有别的办法吗？

191907 次浏览
小开
最佳答案

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

小开

注意: 这个答案来自2011年。当时这是一个很好的答案，但是到了2015年，大多数浏览器都支持原生 HTML 属性，所以(通常)没有必要在 JS 中实现这样的自定义逻辑。参见 艾迪的回答和 那些文件。

在上传文件之前，您可以使用 Javascript 检查文件的扩展名，并防止表单不匹配时被提交。要上载的文件的名称存储在 form 元素的“ value”字段中。

这里有一个简单的例子，只允许上传以“ . 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 检查。除了客户端检查外，还必须检查服务器端。同时我也建议检查服务器端的大小，这样用户就不会因为一个2GB 的文件而崩溃你的服务器(据我所知，在客户端检查文件大小是不可能的，除非使用 Flash 或者 Javaapplet 之类的)。

然而，使用我在这里给出的方法在手工检查客户端仍然是有用的，因为它可以防止错误，并且是对非严重损害的次要威慑。

小开 
 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.addEventListener("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" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">

适用于所有浏览器，除了 IE9。我还没有在 IE10 + 中测试过。


提交答案