在表單提交上，檢查準備上傳的文件的大小？

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