Question

我有以下代码

$("#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警报，但当我尝试检查多个文件时，我在浏览器控制台{{1}中收到此错误}}。我的问题是，如何查看文件上传中所有文件的文件大小？提前致谢

Answer 1

问题是，如果您没有填充图像的所有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;
  }
}

Answer 2

另一种方法可能是在用户选择文件时验证文件。您可以通过侦听输入的更改来完成此操作。

$("#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);
  }
};

这是一个有效的fiddle.

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

2 个答案: