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（错误）仍然显示为FALSE！如何将此var设置为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.");
        }
    };        
};

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

2 个答案: