javascript - 函数返回执行Jquery Image加载之前的值

Question

if (DataService.Validation(file)) {
    //angularjs call to api controller
};    

//DataService
Validation: function (file) {
    var Url =   URL.createObjectURL(file);
    var img = new Image();

    $(img).load(function () {
        var imgwidth = this.width;
        var imgheight = this.height;
        if (imgheight  > 400) {
            viewModel.ErrorMessage = 'The Image height cannot be more then 400 px.';
            return false;
        }
    });

    img.src = Url;

    if (file == null) {
        viewModel.ErrorMessage = 'Please select a file to upload.';
        return false;
    }

    if (viewModel.Name == null) {
        viewModel.ErrorMessage = 'Name is a required field.';
        return false;
    }

    return true;
}

上面的验证函数完成执行并返回 true，而没有检查 img load 函数内部的代码。这意味着即使图像大于 400px，验证也会返回 true，因为 load 内部的代码会运行很长时间一旦整个 Jquery ajax 调用发送到 api Controller .. 我想要实现的是，在执行图像加载内的代码之前，验证不应返回该值。

Answer 1

我在检查图像尺寸时遇到了同样的问题，因为图像加载是异步的。也正如@Abhinandan 所说 “IMG 加载函数仅在浏览器完全加载图像后才会执行，并且由于它是异步的，因此您的函数不会等待它执行”

我使用了以下方法。希望它会有所帮助。

在更改文件时在图像标记中设置一个额外属性，如下所示

$('input[type=file]').on('change',function(){
    element = $(this);
    var files = this.files;
    var _URL = window.URL || window.webkitURL;
    var image, file;
    image = new Image();
    image.src = _URL.createObjectURL(files[0]);
        image.onload = function() {
            element.attr('uploadWidth',this.width);
            element.attr('uploadHeigth',this.width);
        }
    });

现在您可以将函数修改为以下内容

$.validator.addMethod('checkDim', function (value, element, param) {     
    var image = new Image();
    var file = element.files[0];
    var _URL = window.URL || window.webkitURL;
    image.src = _URL.createObjectURL(file);
        if(element.uploadWidth== param[0] element.uploadHeigth== param[1]){ 
            return true;
        }
        else{            
            return false;
        }

}, 'Image dimension must be as specified');

这对我有用