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，因为加载中的代码在很长一段时间后运行一旦整个Jquery ajax调用被发送到api控制器.. 我想要实现的是，在执行图像加载中的代码之前，验证不应该返回值。

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');

它适合我

Answer 2

行为是正确的，因为您的函数将始终返回“true”值。 IMG加载功能只有在浏览器完全加载图像后才会执行，因为它的异步功能不会等待它执行。此外，如果要检查正在加载的图像的宽度/高度，请使用naturalWidth / naturalHeight，因为这将给出正确的值，而不是由css分配给图像的值。

你可以做的是内部图像加载功能，你可以使用true / false值作为参数调用你的函数。

函数在执行Jquery Image加载之前返回值

2 个答案: