Question

我有这个脚本工作（不在if部分）来检查图片尺寸。图片必须低于300x300，并且此脚本始终返回false（即使是100x100图片）

function validate_dimention(fileName) {
    input = document.getElementById("profilepic");
    file = input.files[0];
    var reader = new FileReader();
    var image = new Image();
    var width;
    var height;
    reader.readAsDataURL(file);
    reader.onload = function(pic) {
        image.src = pic.target.result;
        image.onload = function() {
            width = this.width; //panjang
            height = this.height; //lebar
        }
    }
    if (width <= 300 && height <= 300) {
        return true;
    } else {
        console.log(width);
        console.log(height);
        return false;
    }
}

控制台日志总是以未定义的方式返回（因此代码没有语法错误），有没有办法让宽度等于// panjang，高度等于// lebar ??

Answer 1

这是因为onload是一个事件，并且是异步的。它将在加载图像后调用。只需移动onload函数内的条件即可解决此问题。但是，由于该异步调用，您将无法直接return任何值。您必须使用回调，您可以根据结果执行代码：

function validate_dimention(fileName, callback) {
    input = document.getElementById("profilepic");
    file = input.files[0];
    var reader = new FileReader();
    var image = new Image();
    var width;
    var height;
    reader.readAsDataURL(file);
    reader.onload = function(pic) {
        image.src = pic.target.result;
        image.onload = function() {
            width = this.width; //panjang
            height = this.height; //lebar
            if (width <= 300 && height <= 300) {
                callback(true);
            } else {
                callback(false);
            }
        }
    }
}

// And you call it that way :
validate_dimention(fileName, function (result) {
    // Do whatever you want, using result as the result of your function. It 'll be either true or false.
});

嵌套函数中的javascript var作为事件

1 个答案: