<input type =“file”>通过扩展限制可选文件
如何能限制可以通过扩展inputtypes=“文件”元素select的文件…？
我已经知道了accept属性，但是在chrome中，它确实限制了最后一个定义的MIMEtypes（在本例中为“gif”）的文件，FF4甚至不限制任何东西。
<input type="file" accept="image/jpg, image/gif"> 我做错了什么？ 或者还有其他的方法吗？
你的任何build议…
老实说，限制文件的最好方法是在服务器端。 人们可以伪造客户端上的文件types，以便在服务器传输时获取完整的文件名，parsing出文件types，然后返回消息通常是最好的select。
简单的做法是：
<input type="file" accept=".gif,.jpg,.jpeg,.png,.doc,.docx">
适用于除IE9以外的所有浏览器。 我没有在IE10 +中testing过。
注：这个答案是从2011年。这是一个很好的答案，但到2015年，大多数浏览器支持本地HTML属性，所以通常不需要在JS中实现这样的自定义逻辑。 查看Edi的答案和文档 。
在file upload之前，您可以使用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是正确的，你总是想在服务器端检查，因为用户可以通过closuresJavaScript来打败你的Javascript检查，或者在你的代码到达浏览器后编辑你的代码。 除了客户端检查之外，肯定会检查服务器端。 另外我build议检查服务器端的大小，以便用户不要使用2 GB文件崩溃服务器（我不知道如何检查客户端上的文件大小，而不使用Flash或Java Applet或某些东西）。
不过，用我在这里给出的方法事先检查客户端还是有用的，因为它可以防止错误，对非严重的恶作剧是一个小的威慑。
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; } }
试过这个，效果很好
