Javascript 进行3次统一检查

我有一个包含3个文件输入字段的表单，但Laravel给了我这个问题：

所以，在发送文件之前，我会检查一下，最大分辨率将是2000x2000，我得到了这个代码并修改了，但它仍然给出了一个错误，因为一个通过了另一个。我想知道如何将3张支票合并为一张支票

这是我的密码：

$("#personal").change(function() { 
  var fr = new FileReader;
  fr.onload = function() {
    var imgPersonal = new Image;
    imgPersonal.onload = function() {
      if (imgPersonal.width > 2000 &&  this.height > 2000) {
        $("#submitDocs").attr("disabled", true); 
      } else {
        $("#submitDocs").removeAttr("disabled");
      }
    };
    imgPersonal.src = fr.result;
  };
  fr.readAsDataURL(this.files[0]);
});

$("#self").change(function() { 
  var fr = new FileReader;
  fr.onload = function() {
    var imgSelf = new Image;
    imgPersonal.onload = function() {
      if (imgSelf.width > 2000 &&  this.height > 2000) {
        $("#submitDocs").attr("disabled", true);
      } else {
          $("#submitDocs").removeAttr("disabled");
        }
      }
    };
    imgSelf.src = fr.result;
  };
  fr.readAsDataURL(this.files[0]);
});

$("#address").change(function() { 
  var fr = new FileReader;
  fr.onload = function() {
    var imgAddress = new Image;
    imgPersonal.onload = function() {
      if (imgAddress.width > 2000 &&  this.height > 2000) {
        $("#submitDocs").attr("disabled", true); 
      } else {
          $("#submitDocs").removeAttr("disabled");
        } 
      }
    };
    imgAddress.src = fr.result;
  };
  fr.readAsDataURL(this.files[0]);
});

---

尝试将所有重复的代码放在一个函数中，并保留一个持久对象，用于检查上传的图像是否无效：

const checks = {
  personal: true,
  self: true,
  address: true,
};

function validate(file, checkAttr) {
  const fr = new FileReader();
  fr.readAsDataURL(file);
  fr.onload = function() {
    const img = new Image();
    img.onload = () => {
      if (img.width > 2000 || img.height > 2000) checks[checkAttr] = true;
      else checks[checkAttr] = false;
      if (checks.personal && checks.self && checks.address) $("#submitDocs").removeAttr("disabled");
      else $("#submitDocs").attr("disabled", true);
    }
    img.src = fr.result;
  }
}

$("#personal").change(function() {
  validate(this.files[0], 'personal');
});

// other handlers

---

@一定的性能，谢谢，我可以按照你的方式来做，我做了这个函数，并在每个输入中使用onblur=“btndisabled（）；”

function btndisabled() {
        var sizePersonal = personal.files[0].size;
        var sizeSelf = self.files[0].size;
        var sizeAddress = address.files[0].size;
        if (sizePersonal < 1000000 && sizeSelf < 1000000 && sizeAddress < 1000000) {
          $("#submitDocs").removeAttr("disabled");
        } else {
          alert('File larger than 1MB');
          $("#submitDocs").attr("disabled", true);
        }
      }

函数btndisabled（）{
var sizePersonal=personal.files[0]。大小；
var sizeSelf=self.files[0]。大小；
var sizeAddress=地址。文件[0]。大小；
如果（sizePersonal<1000000&&sizeSelf<1000000&&sizeAddress<1000000）{
$（“#submitDocs”）.removeAttr（“禁用”）；
}否则{
警报（“大于1MB的文件”）；
$（“#submitDocs”）.attr（“禁用”，真）；
}
}

您的代码有一些语法错误-括号/括号不匹配。此外，在调用构造函数时，请使用括号。