从多个文件上传中检索文件大小

Retrieve file size from multiple file uploads

本文关键字：检索 文件大小 文件      更新时间：2023-09-26

我在下面有这个代码

$("#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: Cannot read property 'size' of undefined中收到这个错误。我的问题是，如何检查上传文件中所有文件的文件大小？提前感谢

问题是，如果没有用图像填充所有input上传，则会引发此错误。如果你填写了所有的，错误就不会发生。您可以创建一个函数来检查输入是否已填充。然后，如果它们没有被填充，则返回值0。否则，返回执行的其余计算的大小。

看小提琴：https://jsfiddle.net/3xLLjko9/3/

$("#btn_save_development").bind("click", function () {
    var devMainImgSize = parseFloat(checkFilled($("#dev_main_image")) / 1024).toFixed(2);
    var devListingImg1Size = parseFloat(checkFilled($("#devListingImg1")) / 1024).toFixed(2);
    var devListingImg2Size = parseFloat(checkFilled($("#devListingImg2")) / 1024).toFixed(2);
    var devListingImg3Size = parseFloat(checkFilled($("#devListingImg3")) / 1024).toFixed(2);
    var devListingImg4Size = parseFloat(checkFilled($("#devListingImg4")) / 1024).toFixed(2);
    var devListingImg5Size = parseFloat(checkFilled($("#devListingImg5")) / 1024).toFixed(2);
    var devListingImg6Size = parseFloat(checkFilled($("#devListingImg6")) / 1024).toFixed(2);
    //FOR TESTING PURPOSES
    console.log(devMainImgSize);
    console.log(devListingImg1Size);
    console.log(devListingImg2Size);
    console.log(devListingImg3Size);
    console.log(devListingImg4Size);
    console.log(devListingImg5Size);
    console.log(devListingImg6Size);
    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;
    }
});
function checkFilled(ele){
  if(ele[0].files.length > 0){
    return ele[0].files[0].size;
  } else {
    return 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);
  }
};

这是一把正在工作的小提琴。

相关文章：