.onload函數后如何執行代碼

Question

上傳前，我正在使用圖像預覽。 所以我正在顯示選擇的文件。 運作良好。

但是我陷入了困境。 對於“輸入文件”上的Foreach文件，腳本將測試它是否太小（小於300px w：h）。

如果這些文件之一違反了此規則（寬度和高度必須大於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（error）仍然顯示FALSE！ 我如何才能將此變量設置為true？

謝謝

Answer 1

當您發現錯誤時，必須為您付出努力，因此它將不會執行下一個驗證。

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

Answer 2

問題是img.onload函數是異步執行的。 因此， console.log(error)在img.onload之前或之間執行

這可以通過查看console.log的序列來證明，如下所示：

false
300 300
200 300

要解決此問題，請創建一個變量以計算已加載的圖像數量，然后在每個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.");
        }
    };        
};