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

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; 
    } 
}); 

---

一旦你的文件对象，这里是（除了大小）可以访问属性：

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; 
     }); 
    });