jQuery File Upload-获取上传图像的大小

Question

I am using the jQuery File Upload to upload product images. There are different "types" of images for each product (different size/dimensions).

I have altered the upload template so that a dropdown of possible image types is shown for each file added. Before clicking upload, the user must pick from the dropdown to indicate what image type the file being uploaded is.

Some image types are an exact size, some just have a minimum width. What I want to do is compare the actual image size to the type chosen to validate they are indicating the correct type.

I'm attempting to do this via the "fileuploadsubmit" callback where I have already added a check to make sure an option is selected in the dropdown.

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    $('#uploading_note').removeClass("alert-danger").html("");
    var inputs = data.context.find(':input');
    if (inputs.filter(function () {
        return !this.value && $(this).prop('required');
    }).first().focus().length) {
        data.context.addClass("alert-danger");
        data.context.find('.file_msg').html("Image Type is required!"); 
    data.context.find('button').prop('disabled', false);
    return false;
}
    var fixed_dimension = 0;
    var wt = 0;
    var ht = 0;
    var image_size = getImageSize(data,function(width, height) {
        wt = width;
        ht = height;
        console.log (wt+'x'+ht);
        return [wt,ht];
    }); 
   ........... 

This is the getImageSize function.

    function getImageSize(data,callback){
    var img = new Image();
    img.src = _URL.createObjectURL(data.files[0]);
            img.onload = function () {
                var w = this.width;
                var h = this.height;
                console.log(w+'-getImageSize-'+h);
                callback (w,h);
            }; 

}

The console.log() in both output correctly but I can't get these numbers outside the functions to use them. I understand it has to do with the functions be asynchronous but I can't figure out how to get around it. Or maybe there is a better jQuery File Upload built in option I'm missing.

I understand the asynchronous function issue, this one was attempt at finding a solution to validating the image size. I have also attempted to do this in the PHP script. It works in that I can prevent the upload of an image but the user experience is poor. So I am still looking for a solution as to how to do image size validation using jQuery File Upload.

Below is an update version of the code.

$('#fileupload').bind('fileuploadsubmit', function (e, data) {
    console.log(data);

    $('#uploading_note').removeClass("alert-danger").html("");
    var inputs = data.context.find(':input');
    if (inputs.filter(function () {
        return !this.value && $(this).prop('required');
    }).first().focus().length) {
        console.log(data.context);
        data.context.addClass("alert-danger");
        data.context.find('.file_msg').html("Image Type is required!"); 
        //$('#uploading_note').addClass("alert-danger").html("Image Type is required!");
    data.context.find('button').prop('disabled', false);
    return false;
}

    var fixed_dimension = 0;
    var wt = 0;
    var ht = 0;
    var image_size = getImageSize(data,function(width, height) {
        wt = width;
        ht = height;
        console.log(wt+'-getImageSize-function'+ht);
       switch (inputs[0].value){
        case "16x9_background":
        case "16x9":
            var req_width = 1920;
            var req_height = 1080;
            fixed_dimension = 1;
            break;
        case "3x4":
            var req_width = 1600;
            var req_height = 1200;
            fixed_dimension = 1;
            break;
        case "hires":
            var req_width = 1400;
            var req_height = 0;
            break;
        case "lowres":
            var req_width = 200;
            var req_height = 0;
            break;
    }
    if (fixed_dimension){
        if (wt != req_width || ht != req_height){
            data.context.addClass("alert-danger");
            data.context.find('.file_msg').html("Image dimensions must be exactly "+req_width+"x"+req_height+". This image is "+wt+"x"+ht+". Image not uploaded.");
            return false;
        } 
    } else {
        if (wt < req_width){
           data.context.addClass("alert-danger"); 
           data.context.find('.file_msg').html("Image dimensions wrong!! Width must be "+req_width+", not "+wt+". Image not uploaded.");
            console.log(wt+'x'+ht);
            return false;
        }
    }    
    d = inputs.serializeArray();
    d.push({ name: "folder", value: $('#barcode').val() });
    d.push({ name: "stock_num", value: $('#stock_num').val() });
    data.formData = d;
    console.log(wt+"xxxx"+ht);
    data.submit();  // SUMBIT THE FORM
    }); 

    console.log(wt+"xxxx"+ht);
    console.log("imagesize:"+image_size);
    return false;  //STOP THE DEFAULT SUBMIT
}); 

Answer 1

What I ended up doing was removing the actual form submit button and replace it with a button (not type submit) that calls the validation code. If it passes, the form is then submitted normally (via data.submit()), if not it returns the error. I had to remove the file level submit buttons (or I found it easier to do that).

    $('#fileupload').fileupload({
    url: 'process.php',
    previewThumbnail: true,
    sequentialUploads: true,
    acceptFileTypes: /(\.|\/)(jpe?g|pdf|zip)$/i,
    maxChunkSize: 10000000,
    add: function (e, data) {
        $('#start_upload_button').click(function () {
          getImageSize3(data).then(function(dimensions) {
        image validation... return false if any errors

    data.submit() // submit the form
    });