Javascript 从多个文件上载中检索文件大小

我有下面的代码

$("#btn_save_development").bind("click", function () {


    var devMainImgSize = parseFloat($("#dev_main_image")[0].files[0].size / 1024).toFixed(2);
    var devListingImg1Size = parseFloat($("#devListingImg1")[0].files[0].size / 1024).toFixed(2);
    var devListingImg2Size = parseFloat($("#devListingImg2")[0].files[0].size / 1024).toFixed(2);
    var devListingImg3Size = parseFloat($("#devListingImg3")[0].files[0].size / 1024).toFixed(2);
    var devListingImg4Size = parseFloat($("#devListingImg4")[0].files[0].size / 1024).toFixed(2);
    var devListingImg5Size = parseFloat($("#devListingImg5")[0].files[0].size / 1024).toFixed(2);
    var devListingImg6Size = parseFloat($("#devListingImg6")[0].files[0].size / 1024).toFixed(2);

    if(devMainImgSize > 800)
    {
        alert("The Main Listing Image too large. It should not be above 800KB. Please upload an image with a smaller size");
        return false;
    }

    if (devListingImg1Size > 800 || devListingImg2Size > 800 || devListingImg3Size > 800 || devListingImg4Size > 800 || devListingImg5Size > 800 || devListingImg6Size > 800) {
        alert("One or all of the Development Listing Image(s) is above 800KB. Please ensure none of the development listing images are larger than 800KB");
        return false;
    }
});

---

我想用它来检查通过文件上传上传的图像的大小。我遇到的问题是，如果我尝试只在一个文件中检查文件大小，上传代码会正常工作，我会看到Javascript警报，但当我尝试检查多个文件时，我在浏览器控制台中遇到此错误

Uncaught TypeError:无法读取未定义的

的属性“size”。我的问题是，如何检查文件上载中所有文件的文件大小？提前感谢

问题是，如果您没有用图像填充所有的

输入

上传，则会抛出此错误。如果您将它们全部填充，则不会发生错误。您可以创建一个函数，检查输入是否已填充。如果没有填充，则返回值

0

。否则，返回执行的其余计算的大小

看小提琴：

---

另一种方法是在用户选择文件时对其进行验证。您可以通过监听输入上的更改来实现这一点

$("#fileInput").on("change", processFiles);

var processFiles = function(event) {
  var files = event.target.files;
  //Loop through our files  
  for (var i = 0; i < files.length; i += 1) {
    var file = files[i]; 
    if(file.size / 1024 > 800){
          alert("file too big!");
    }
    //Build the File Info HTML  
    var fileInfo = ["<li>",
                     file.name,
                     "<span>",
                     file.size / 1024,
                     " kb</span>", 
                     "</li>"].join(''); 
    $("#list").append(fileInfo);
    reader.onload = loaded;
    reader.readAsDataURL(file);
  }
};

$（“#文件输入”）。打开（“更改”，处理文件）；
var processFiles=函数（事件）{
var files=event.target.files；
//循环浏览我们的文件
对于（var i=0；i800）{
警告（“文件太大！”）；
}
//构建文件信息HTML
var fileInfo=[“
”，
file.name，
"",
file.size/1024，
“kb”，
“
”]。加入（“”）；
$（“#列表”）.append（fileInfo）；
reader.onload=已加载；
reader.readAsDataURL（文件）；
}
};

---

这是一个实用的

不错的！你的方法给我带来了一些清晰的问题，我已经能够解决它。谢谢

$("#fileInput").on("change", processFiles);

var processFiles = function(event) {
  var files = event.target.files;
  //Loop through our files  
  for (var i = 0; i < files.length; i += 1) {
    var file = files[i]; 
    if(file.size / 1024 > 800){
          alert("file too big!");
    }
    //Build the File Info HTML  
    var fileInfo = ["<li>",
                     file.name,
                     "<span>",
                     file.size / 1024,
                     " kb</span>", 
                     "</li>"].join(''); 
    $("#list").append(fileInfo);
    reader.onload = loaded;
    reader.readAsDataURL(file);
  }
};