jQuery jquery在提交前验证文件类型和文件大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12553307/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery to verify file type and file size before submitting
提问by Norman
Possible Duplicate:
Using jQuery, Restricting File Size Before Uploading
可能的重复：
使用 jQuery，在上传前限制文件大小
Is there a good jquery script or other method that can verify file size and file type before uploading a file to a server? I've tried looking all over but never found anything to do something like this.
是否有一个很好的 jquery 脚本或其他方法可以在将文件上传到服务器之前验证文件大小和文件类型？我试过四处寻找，但从未找到任何可以做这样的事情。
回答by David says reinstate Monica
I'd suggest the following:
我建议如下：
$('input:file').change(
function(e) {
var files = e.originalEvent.target.files;
for (var i=0, len=files.length; i<len; i++){
console.log(files[i].fileName, files[i].type, files[i].fileSize);
}
});?
As JavaScript can't remove files from the selected fileListobject, you'd have to perform checks against the file attributes and prompt the user to deselect files that would be considered invalid due to file-type or file-size (and, obviously, prevent the form submitting):
由于 JavaScript 无法从所选fileList对象中删除文件，因此您必须针对文件属性执行检查并提示用户取消选择由于文件类型或文件大小而被视为无效的文件（并且，显然，防止表单提交）：
$('input:file').change(
function(e) {
var files = e.originalEvent.target.files;
for (var i=0, len=files.length; i<len; i++){
var n = files[i].name,
s = files[i].size,
t = files[i].type;
if (s > 100) {
console.log('Please deselect this file: "' + n + '," it\'s larger than the maximum filesize allowed. Sorry!');
}
}
});?
(This last code tested and working in Chromium 19 and Firefox 15, both on Ubuntu 11.04.)
（这最后的代码在 Chromium 19 和 Firefox 15 中测试和工作，两者都在 Ubuntu 11.04 上。）
回答by ddinchev
Taken from here: How can I upload files asynchronously?
取自此处：如何异步上传文件？
I'm not sure if it would work on old browsers (like IE6/7 (duh, who the hell still uses those)) but you might try it. It should work on all modern browsers though. Try it:
我不确定它是否适用于旧浏览器（比如 IE6/7（呃，谁还在使用那些）），但你可以尝试一下。不过，它应该适用于所有现代浏览器。尝试一下：
<form enctype="multipart/form-data">
<input name="file" type="file" />
<input type="submit" value="Upload" />
</form>
$(':file').change(function(){
var file = this.files[0];
name = file.name;
size = file.size;
type = file.type;
//your validation
});
回答by Jo?o Silva
There's the jQuery File Upload plugin, no need to reinvent the wheel. It has an acceptFileTypesoption that allows you to provide a regular expression to match a given file type, as well as a maxFileSizeoption, e.g.:
有jQuery File Upload 插件，无需重新发明轮子。它有一个acceptFileTypes选项，允许您提供一个正则表达式来匹配给定的文件类型，以及一个maxFileSize选项，例如：
{
fileTypes: /^(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
}
Note, however, that this will only work for web browsers that support the File API. Otherwise, you'd have to verify the file type on the server-side.
但是请注意，这仅适用于支持File API 的Web 浏览器。否则，您必须在服务器端验证文件类型。
