.onload関数の後にコードを実行するにはどうすればいいですか？

Question

アップロード前に画像プレビューを扱っています。 これで、選択したファイルが表示されます。うまくいきます。

しかし、私は状況に固執しています。 "入力ファイル"にファイルを添付すると、スクリプトは小さすぎるかどうかをテストします（300px w：hより小さい）。

これらのファイルの1つがこのルールに従わない場合（幅と高さが300pxより大きい必要があります）、スクリプトはエラーvarをtrueに設定しています。そして、 "for"ブロックの後に、 "error"が真か偽かをチェックします。

私は、このシナリオで働いている：

window.onload = function() {   
var fileUpload2 = document.getElementById("inputFileID"); 
    fileUpload2.onchange = function() { 
     var error = false; 
     if (typeof (FileReader) != "undefined") { 
      var dvPreview = document.getElementById("divToShowPreview"); 
      dvPreview.innerHTML = ""; 
      var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; 
      if(fileUpload2.files.length > 3) { 
       alert('Only 3 files allowed!'); 
      } else { 
       for (var i = 0; i < fileUpload2.files.length; i++) { 
        var file = fileUpload2.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() { 
          console.log(this.width + " " + this.height); 
          if(this.width >=300 && this.height >=300) { 
           dvPreview.appendChild(img); 
          } else { 
           error = true; 
          } 
         }; 
        }; 
        reader.readAsDataURL(file); 
        } else { 
         alert(file.name + " is not a valid image file."); 
         dvPreview.innerHTML = ""; 
         return false; 
        } 
       } 
       console.log(error);     
      } 
     } else { 
      alert("This browser does not support HTML5 FileReader."); 
     } 
    };   
}; 

あなたが見ることができるように、にconsole.log（エラー）がまだFALSE示しています！ このvarセットをどのようにしてtrueにすることができますか？

おかげ

Answer 1

img.onloadの機能は非同期に実行されるという問題があります。この問題を解決するために

false 
300 300 
200 300 

、どのように多くをカウントする変数を作成しますので、console.log(error)はimg.onload

これはあなたのconsole.logのシーケンスを調べることで実績のある、次のようになり、そのことができます前に、または間で実行されます画像がロードされた後、img.onloadごとにカウントされます。読み込んだイメージの数がアップロードされたイメージの数と等しい場合、エラーが存在するかどうかをチェックする関数を呼び出します。例えば：

function imageError(){ 
    alert('image size to small'); 
} 

window.onload = function() { 
    var fileUpload2 = document.getElementById("inputFileID"); 

    // add variables 
    var imgLoaded = 0;  

    fileUpload2.onchange = function() { 
     var error = false; 
     if (typeof (FileReader) != "undefined") { 
      var dvPreview = document.getElementById("divToShowPreview"); 
      dvPreview.innerHTML = ""; 
      var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/; 
      if(fileUpload2.files.length > 3) { 
       alert('Only 3 files allowed!'); 
      } else { 
       for (var i = 0; i < fileUpload2.files.length; i++) { 
        var file = fileUpload2.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() { 

          //increase the loaded img count 
          imgLoaded++; 
          console.log(imgLoaded); // another check to show the sequence of events 

          console.log(this.width + " " + this.height); 
          if(this.width >=300 && this.height >=300) { 
           dvPreview.appendChild(img); 
          } else { 
           error = true; 
          } 

          // call imageError if all image have been loaded and there is and error 
          if (imgLoaded == fileUpload2.files.length){ 
           console.log(error) // just to check 
           if (error){ 
            imageError(); 
           } 
          } 
         }; 
        }; 
        reader.readAsDataURL(file); 
        } else { 
         alert(file.name + " is not a valid image file."); 
         dvPreview.innerHTML = ""; 
         return false; 
        } 
       } 
       //console.log(error); // no need for this line 
      } 
     } else { 
      alert("This browser does not support HTML5 FileReader."); 
     } 
    };   
}; 

Answer 2

あなたがエラーを見つけたときに、あなたのためを破るために持っているので、それは次の検証を行いません。

... 
} else { 
    error = true; 
    break; 
} 
...