如何通过扩展名限制可以使用 input type="file" 元素选择的文件？
我已经知道 accept 属性，但在 chrome 中，它确实通过定义的最后一个 MIME 类型（在本例中为“gif”）限制文件，而 FF4 甚至没有任何限制。
<input type="file" accept="image/jpg, image/gif">
我做错了什么还是有其他方法？
【问题讨论】：
标签： html input-type-file
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;
}
}
试过了，效果很好
【讨论】：
注意：这个答案来自 2011 年。当时这是一个非常好的答案，但截至 2015 年，大多数浏览器都支持原生 HTML 属性，因此（通常）不需要实现JS中的这种自定义逻辑。请参阅Edi's answer 和the docs。
在文件上传之前，您可以使用Javascript检查文件的扩展名，如果不匹配则阻止提交。要上传的文件名存储在表单元素的“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 检查。除了客户端检查之外，一定要检查服务器端。此外，我还建议检查服务器端的大小，这样用户就不会因为 2 GB 文件而使您的服务器崩溃（我不知道在不使用 Flash 或 Java 小程序或其他东西的情况下检查客户端的文件大小） )。
但是，使用我在这里给出的方法事先检查客户端仍然很有用，因为它可以防止错误并且对非严重的恶作剧有轻微的威慑作用。
【讨论】：
简单的方法是：
<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">
适用于所有浏览器，IE9 除外。我没有在IE10+中测试过。
【讨论】：
accept 在 Firefox 中不起作用（从 31.0 和 32.0 开始）
老实说，限制文件的最佳方式是在服务器端。人们可以在客户端欺骗文件类型，因此在服务器传输时获取完整的文件名，解析文件类型，然后返回消息通常是最好的选择。
【讨论】：