完成图像/高度和宽度验证后启用提交按钮

Question

我有以下代码来检查所选图片的尺寸和尺寸是否在某些限制范围内。提交按钮被禁用，直到所有图像都被验证为在约束范围内。

我遇到的一个问题是，由于验证图片的宽度和高度可能需要更长的时间，因此可能会在验证最后一张图片之前启用该按钮。我在下面的代码中用注释标记了这两个部分。

如何确保＆＃34;问题行＆＃34;在验证图像宽度/高度之前是否遇到过？

$('#file').change(function(){
var _URL = window.URL || window.webkitURL;
var image, file;
var fileArray = this.files;
var numfiles = fileArray.length;
var img = new Image();
var allgood = true;
var error = "";

for (var i=0; i< numfiles; i++)
{
    file = fileArray[i];
    size = Math.round(file.size / 1024);
    name = file.name;

    if (size > 50){
        allgood = false;
        error = "Your image " + name + " is too big (> 50KB)";
    }

    img.onload = function(){
        width = img.width;
        height = img.height;
        if (width != 300 || height != 200){
            /***** This might not get done in time *****/
            allgood = false;
            error += "Your image " + name + " is not 300px x 200px";
        }
    }
    img.src = _URL.createObjectURL(file);

    if (!allgood){
        break;
    }


}
if (!allgood){
    $('#error').html(error);
} else {
    /***** Problem line *****/
    $('#upload').prop("disabled", false);
}
});

注意：#file是指具有多个属性集的类型文件的HTML输入元素，＃upload指的是具有禁用属性集的提交按钮。

Answer 1

这个怎么样： -

$('#file').change(function(){
var _URL = window.URL || window.webkitURL;
var image, file;
var fileArray = this.files;
var numfiles = fileArray.length;
var img = new Image();
var allgood = true;
var error = "";

var totalLoaded = 0;

for (var i=0; i< numfiles; i++)
{
    file = fileArray[i];
    size = Math.round(file.size / 1024);
    name = file.name;

    if (size > 50){
        allgood = false;
        error = "Your image " + name + " is too big (> 50KB)";
    }

    img.onload = function(){
        totalLoaded++;
        width = img.width;
        height = img.height;
        if (width != 300 || height != 200){
            /***** This might not get done in time *****/
            allgood = false;
            error += "Your image " + name + " is not 300px x 200px";
        }

        if(totalLoaded == numFiles){
           if (!allgood){
              $('#error').html(error);
           } else {
              /***** Problem line *****/
              $('#upload').prop("disabled", false);
           }
       }
    }
    img.src = _URL.createObjectURL(file);

}
});

每次加载图像时计数，只在完成所有图像时调用allgood检查。

修改

如果你想退出失败，你可以尝试这样的事情： -

$('#file').change(function(){
    loadImage(this.files, 0);
});

function loadImage(array, index){
    var _URL = window.URL || window.webkitURL;
    var file = fileArray[i];
    var size = Math.round(file.size / 1024);
    var name = file.name;

    if (size > 50){
        $('#error').html("Your image " + name + " is too big (> 50KB)");
        return;
    }

    var img = new Image();
    img.onload = function(){
        var width = img.width;
        var height = img.height;

        if (width != 300 || height != 200){
            $('#error').html("Your image " + name + " is not 300px x 200px");
            return;
        }

        if(index == (array.length-1)){
          $('#upload').prop("disabled", false);
          return;
        }

        loadImage(array, index++);
    }

    img.src = _URL.createObjectURL(file);
}