Question

我需要在接受上传之前验证图片尺寸，请参阅下面的代码。

由于某种原因，“check”参数没有按照我的意愿设置，checkImage函数总是返回false。

表单元素......

<input type="file" name="bg_image" id="bg_image" accept=".jpg, .png, .gif" />

jQuery验证方法，规则和消息......

jQuery.validator.addMethod("check_size",checkImage);

function runFormValidation() {
    var $myForm= $('#reg-form').validate({
        rules: {
            bg_image: {
                check_size: 720
            },
        },
        messages: {
            bg_image: {
                check_size: 'Image Dimension MUST be more than 720px*720px.'
            },
        },
    });
};

实际的checkImage函数......

function checkImage(value, element, min_size)
{
   var check = 0;
   if (typeof (element.files) != "undefined") {
        var reader = new FileReader();
        reader.readAsDataURL(element.files[0]);
        reader.onload = function (e) {
            var image = new Image();
            image.src = e.target.result;
            image.onload = function () {
                var height = this.height;
                var width = this.width;
                if (height < min_size || width < min_size) 
                     { check=1; }
                else { check=2; }
            };
        }
    }
    if (check==2) { return true; }  // Doesn't Work - "check" didn't get set as I wish
    return false;
};

Answer 1

＆＃39;检查＆＃39;在加载图像后设置，因此在设置值之前运行if（check == 2）。

因此，在加载图像后，其余代码将起作用，并使用正确的值再次设置检查，但函数已经返回了错误的值。

你应该等到返回值，直到你收到你想要的值，也就是说，返回应该在image.onload函数中发生。

（因为我还没有发表评论，我一直在补充这个答案......）

不是一个完整的答案，但在评论中应该以某种方式完成

function checkImage(value, element, min_size)
{
   var check = 0,
        returnValue;
   if (typeof (element.files) != "undefined") {
        var reader = new FileReader();
        reader.readAsDataURL(element.files[0]);
        reader.onload = function (e) {
            var image = new Image();
            image.src = e.target.result;
            image.onload = function () {
                var height = this.height;
                var width = this.width;
                if (height < min_size || width < min_size)
                     { returnValue = false; }
                else { returnValue = true; }
            };
        }
        /* as long as returnValue === undefined, do nothing, else
           return returnValue*/
    } else {
        return false;
    }
};

但最好是在加载功能准备好之后运行一个显示结果的函数，而不是返回一个值，你必须等待。

Answer 2

使用控制台记录更新我的功能......

function checkImage(value, element, param)
{
   var check = 0;
   if (typeof (element.files) != "undefined") {
        var reader = new FileReader();
        reader.readAsDataURL(element.files[0]);
        reader.onload = function (e) {
            var image = new Image();
            image.src = e.target.result;
            image.onload = function () {
                var height = this.height;
                var width = this.width;
                console.log("Print dimension : " + height + " X " + width);
                if (height < 720 || width < 720)
                     { check=1; console.log("inside check = 1"); }
                else { check=2; console.log("inside check = 2"); }
            };
        }
    }
    console.log("outside check value = " + check);
    if (check==2) { return true; }
    return false;
};

当我使用小尺寸图像进行测试时，这是控制台日志的序列...

VM1207:149 outside check value = 0
VM1207:142 Print dimension : 498 X 696
VM1207:144 inside check = 1

为了使其更完整，以下代码（在image.onload中返回）也没有...

function checkImage(value, element, param)
{
   var check = 0;
   if (typeof (element.files) != "undefined") {
        var reader = new FileReader();
        reader.readAsDataURL(element.files[0]);
        reader.onload = function (e) {
            var image = new Image();
            image.src = e.target.result;
            image.onload = function () {
                var height = this.height;
                var width = this.width;
                console.log("Print dimension : " + height + " X " + width);
                if (height < 720 || width < 720)
                     { check=1; console.log("inside check = 1"); return false; }
                else { check=2; console.log("inside check = 2"); return true;  }
            };
        }
    }
    // console.log("outside check value = " + check);
    // if (check==2) { return true; }
    // return false;
};

那么如何进行＆＃34;检查＆＃34;在我返回函数之前设置???

上传前检查图像尺寸

2 个答案: