正在验证图片上传

Question

我想在上传之前验证图片。我限制了尺寸和像素，但问题是我仍然可以上传图像，即使它不适用于限制。如何通过onchange命令完成此验证，从而阻止用户或禁用上载。

var myFile = document.getElementById('file'); 

myFile.addEventListener('change', function() { 
    image = new Image(); 

    if(this.files[0].size > 800000) 
    { 
     alert("File size too big. Please upload a smaller image"); 
     return false; 
    } 
    else 
    { 
    var reader = new FileReader(); 
     //Read the contents of Image File. 
    reader.readAsDataURL(this.files[0]); 
    reader.onload = function (e) 
    { 
     //Initiate the JavaScript Image object. 
     var image = new Image(); 
     //Set the Base64 string return from FileReader as source. 
     image.src = e.target.result; 
     image.onload = function() { 
      //Determine the Height and Width. 
      var height = this.height; 
      var width = this.width; 
      if (height > 500 || width > 375) { 
       alert("Height and Width must not exceed 500px(h) and 375px(w)."); 
       return false; 
      } 
      else 
      { 
       alert("Uploaded image has valid Height and Width."); 
       return true; 
      } 
     }; 
    } 
    } 


}); 

Answer 1

如果验证失败

var myFile = document.getElementById('file'); 
... 
myFile.value="" 

可以重置文件输入元素的值，然后验证显示在页面的用户。

Answer 2

这是我做的替代方案。直到遇到这种情况，我才知道这是可能的。您只需将其添加到相关的警报/返回false部分，并禁用提交按钮。

jQuery("input[type='submit']").attr("disabled", 'disabled');