Question

我正在尝试编写一个函数来检查我通过输入[type = file]选择的图像是否正好是700像素宽，如果不是 - 拒绝此图像。我成功了，但是，有时这个函数会随机返回0并且我需要加载相同的图像几次，直到它正确地读取它的宽度。有关如何改进此代码的任何想法？提前谢谢！

    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image;
            img.src = e.target.result;
            if(img.width == 700) {
                DoSomeStuff();
            } else {
                alert("This image has to be 700 px wide, but is " + img.width + " px wide. Try again!");
                input.value = "";
            }
        };
        reader.readAsDataURL(input.files[0]);
    }

Answer 1

使用.onload，这样只有在加载图像时才会触发该功能。

 if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var img = new Image;


            img.onload = function(){
            if(img.width == 700) {
                DoSomeStuff();
            } else {
                alert("This image has to be 700 px wide, but is " + img.width + " px wide. Try again!");
                input.value = "";
            }
          }


            img.src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
    }

或者您可以添加事件监听器：

img.addEventListener("load", function() {
     if(this.width == 700) {
                DoSomeStuff();
            } else {
                alert("This image has to be 700 px wide, but is " + this.width + " px wide. Try again!");
                input.value = "";
     }
});

但是对于ie ie9或以上支持.addEventListener，因此对于ie8或以下使用.attachEvent

img.attachEvent("onload", function() {});

您可以执行if语句来检查浏览器是否支持.addEventListener：

if (img.addEventListener)
//return false if broswer does not support

检查用户加载的图像的宽度的函数随机返回0

1 个答案: