javascript - 在提交表单时，检查准备上传的文件的大小？

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

Answer 2

您正在寻找的size财产：

var anyOversize =
    Array.prototype.some.call(document.querySelectorAll('input[type="file"]'), function(fileInput) {
        return Array.prototype.some.call(fileInput.files, function(file) {
            return file.size > limit;
        });
    });

（顺便说一下，这是以字节为单位的大小。）