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

debugcn 发表于 Dev

罗素·里尔

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

但我陷入了困境。对于“输入文件”上的 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？

谢谢

am05mhz

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。