画像の幅と高さが非同期であることを確認してOKであれば、画像をプレビュー

Question

入力ファイルの画像から幅と高さを確認し、それらが特定の寸法（w：300px、h：300px ）。これは、各画像をプレビューするには、[OK]働く

window.onload = function() { 
    var fileUpload = document.getElementById("inputFileID"); 
    fileUpload.onchange = function() { 
     if (typeof (FileReader) != "undefined") { 
      var dvPreview = document.getElementById("divToShowThumbs"); 
      dvPreview.innerHTML = ""; 
      var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; 
      for (var i = 0; i < fileUpload.files.length; i++) { 
       var file = fileUpload.files[i]; 
       if (regex.test(file.name.toLowerCase())) { 
        var reader = new FileReader(); 
        reader.onload = function (e) { 
         var img = document.createElement("IMG"); 
         img.src = e.target.result; 
         dvPreview.appendChild(img); 
        } 
        reader.readAsDataURL(file); 
       } else { 
        alert(file.name + " is not a valid image file."); 
        dvPreview.innerHTML = ""; 
        return false; 
       } 
      } 
     } else { 
      alert("This browser does not support HTML5 FileReader."); 
     } 
    } 
}; 

：

私は、このチェックを持っています。 しかし、img.widthを使って "IF - ELSE"を使用しようとすると、非同期で動作するので0を返します！

この状況を解決するにはどうすればいいですか？ 私がしようとしているのは、各画像を読み込み、領域が300px（高さと幅）かどうかを確認し、OKならプレビューを作成することです！

Answer 1

私はこれから助けを得ました - Getting width & height of an image with filereader。そしてここにあなたの変更されたスクリプトがあります。

 window.onload = function() { 
     var fileUpload = document.getElementById("inputFileID"); 
     fileUpload.onchange = function() { 
      if (typeof (FileReader) != "undefined") { 
       var dvPreview = document.getElementById("divToShowThumbs"); 
       dvPreview.innerHTML = ""; 
       var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; 
       for (var i = 0; i < fileUpload.files.length; i++) { 
        var file = fileUpload.files[i]; 
        if (regex.test(file.name.toLowerCase())) { 
         var reader = new FileReader(); 
         reader.onload = function (e) { 
          var img = document.createElement("IMG"); 
          img.src = e.target.result;       

          img.onload = function() { 
           // access image size here 
           console.log(this.width + " " + this.height); 

           if(this.width <=300 && this.height <=300) { 
            dvPreview.appendChild(img); 
           } 
           else { 
            alert("too big an image!"); 
           } 
          }; 

         }; 
         reader.readAsDataURL(file); 
        } else { 
         alert(file.name + " is not a valid image file."); 
         dvPreview.innerHTML = ""; 
         return false; 
        } 
       } 
      } else { 
       alert("This browser does not support HTML5 FileReader."); 
      } 
     }; 
    };