jquery - jquery在提交之前验证文件类型和文件大小

Question

可能重复：
使用 jQuery，在上传之前限制文件大小

在将文件上传到服务器之前，是否有一个好的 jquery 脚本或其他方法可以验证文件大小和文件类型？我试过四处寻找，但从来没有发现任何事情可以做这样的事情。

Answer 1

取自这里：如何异步上传文件？

我不确定它是否适用于旧浏览器（比如 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
});

Answer 2

我建议如下：

$('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);
        }
    });​

JS 小提琴演示。

由于 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!');
            }
        }
    });​

JS 小提琴演示。

（最后一段代码在 Chromium 19 和 Firefox 15 中测试并运行，都在 Ubuntu 11.04 上。）

Answer 3

有jQuery File Upload 插件，无需重新发明轮子。它有一个acceptFileTypes选项允许您提供一个正则表达式来匹配给定的文件类型，以及一个maxFileSize选项，例如：

{
  fileTypes: /^(gif|jpeg|png)$/,
  maxFileSize: 20000000 // 20MB
}

但是请注意，这仅适用于支持File API的 Web 浏览器。否则，您必须在服务器端验证文件类型。