如何在 .onload 函数后执行代码

Question

我正在上传前进行图像预览。 所以我正在显示选择的文件。它运行良好。

但我陷入了困境。 “输入文件”上的 foreach 文件，脚本会测试它是否太小（小于 300px w:h）。

如果其中一个文件违反此规则（宽度和高度必须大于 300 像素），则脚本将错误变量设置为 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！ 如何将此 var 设置为 true？

谢谢

Answer 1

问题在于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.");
        }
    };        
};

Answer 2

当你发现错误时你必须打破你的for，所以它不会执行下一次验证。

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