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

Answer 2

@CertainPerformance，谢谢，我能够按照你的方式去做，我做了这个功能，我使用了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);
        }
      }

做3次统一检查

2 个答案: