异步检查图像宽度和高度，如果它们正常，预览图像答案

【问题标题】：Async checking image width and height and if they are OK, preview image异步检查图像宽度和高度，如果它们正常，预览图像
【发布时间】：2018-05-11 12:17:16
【问题描述】：

我正在尝试检查输入文件图像的宽度和高度，并检查它们是否至少等于特定尺寸（w:300px，h:300px）。

我有这张支票：

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

这可以预览每张图片。但是当我尝试使用 img.width 使用“IF - ELSE”时，它返回 0，因为它以异步方式工作！

关于如何解决这种情况的任何提示？我要做的就是读取每张图片，检查它们的区域是否为 300 像素（高度和宽度），如果确定，则创建预览！

【问题讨论】：

标签： javascript jquery

【解决方案1】：

我从中得到了帮助 - Getting width & height of an image with filereader。这是您修改后的脚本。

        window.onload = function () {
        var fileUpload = document.getElementById("inputFileID");
        fileUpload.onchange = function () {
            if (typeof (FileReader) != "undefined") {
                var dvPreview = document.getElementById("divToShowThumbs");
                dvPreview.innerHTML = "";
                var regex = /^([a-zA-Z0-9\s_\\.\-:])+(.jpg|.jpeg|.gif|.png|.bmp)$/;
                for (var i = 0; i < fileUpload.files.length; i++) {
                    var file = fileUpload.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() {
                                // access image size here 
                                console.log(this.width + " " + this.height);

                                if(this.width <=300 && this.height <=300 )  {
                                    dvPreview.appendChild(img);
                                }
                                else {
                                    alert("too big an image!");
                                }
                            };

                        };
                        reader.readAsDataURL(file);
                    } else {
                        alert(file.name + " is not a valid image file.");
                        dvPreview.innerHTML = "";
                        return false;
                    }
                }
            } else {
                alert("This browser does not support HTML5 FileReader.");
            }
        };
    };

【讨论】：