在表单提交上,检查准备上传的文件大小？

Question

我有一个可以有多个文件输入的表单(每个输入一个文件,而不是多选).

当我提交表单时,如何获取所有input[type="file"]内容的数组并使用FileReader在上传之前查看文件大小,并在任何文件太大时阻止它？

$('#MyForm').submit(function() {

});

我无法从我能找到的有限的FileReader文档中弄清楚这一点.无论如何......或者不让它工作......

Answer 1

问题是我试图用jQuery从文件输入中选择文件的方式.以下是一些示例解决方案:

如果您有一个文件输入,并且用户只能选择一个文件:

// Get the file
var file = $('input[type="file"]').get(0).files[0];

// File size, in bytes
var size = file.size;

如果您有一个文件输入,则选择多个文件:

// Get an array of the files
var files = $('input[type="file"]').get(0).files;

// Loop through files
for (var i=0; file = files[i]; i++) {

    // File size, in bytes
    var size = file.size;
}

如果您有多个文件输入,则选择多个文件:

// Loop through each file input
$('input[type="file"]').each(function(i) {

    // Get an array of the files for this input
    var files = $(this).get(0).files;

    // Loop through files
    for (var j=0; file = files[j]; j++) {

        // File size, in bytes
        var size = file.size;
    }
});

获得File对象后,您可以访问以下属性(除了大小):

https://developer.mozilla.org/en-US/docs/DOM/File#Properties