在“文件上传”窗口中限制文件类型

Question

我有一个关于文件上传的问题，我需要限制文件类型，但我想在“文件上传”窗口中进行，这样用户就看不到不能上传的文件了。我希望用js或jquery来实现。

我知道有一些插件可以做到这一点，比如uploadify，但由于某些原因我不想使用它。

- Philip Gura

---

这在Javascript中是做不到的，毫无疑问。你最好的选择是在上传之前过滤掉无效的扩展名，但出于安全考虑，没有浏览器会让你干扰文件选择窗口。 - NullUserException

Answer 1

请试用这个链接，它应该提供了你所需要的内容。它只使用了纯JavaScript，我认为还没有任何JQuery选项可以实现这个功能。 http://www.codestore.net/store.nsf/unid/DOMM-4Q8H9E

<script type="text/JavaScript">
<!-- Begin
function TestFileType( fileName, fileTypes ) {
if (!fileName) return;

dots = fileName.split(".")
//get the part AFTER the LAST period.
fileType = "." + dots[dots.length-1];

return (fileTypes.join(".").indexOf(fileType) != -1) ?
alert('That file is OK!') : 
alert("Please only upload files that end in types: \n\n" + (fileTypes.join(" .")) + "\n\nPlease select a new file and try again.");
}
// -->
</script>

我已经更新了这个答案，并附上了来自发布链接的实际代码。正如发布者所指出的，这不是解决此问题的“安全”方法。由于这是客户端JavaScript，因此可以使用Web开发工具轻松更改文件的扩展名。始终在服务器端检查上传的文件，以防止上传恶意文件。

- Caimen

Answer 2

为什么不使用HTML中的标签来实现呢？
试试这个吧：

<input type="file" id="fileUpload" accept=".pdf, .jpg, .png">
这将允许您仅上传扩展名为.PDF，.JPG和.PNG的文件。

这个方法对我很有效，无需使用JS。

- Abdulrahman Hasanato

Answer 3

据我的了解，我们可以按照以下方法操作，但对话框仍包含所有文件类型：

<input type="file" name="pic" id="pic" accept="image/gif, image/jpeg" />

但是，您可以使用Jquery / Javascript限制错误类型的文件上传，我想在将文件发送到服务器之前通过检查扩展名来实现。

- Siva Gopal