javascript - 进行3次统一检查

Question

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

所以，我会在发送文件之前检查一下，最大分辨率将为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]);
});

Answer 1

尝试将所有重复代码放入一个函数中，与 DRY 保持一致，并保留一个持久对象来检查上传的图像是否无效:

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