jQuery文件上传 - 获取上传图片的大小

我正在使用jQuery文件上传来上传产品图片。每种产品的图像都有不同的“类型”（不同的尺寸/尺寸）。jQuery文件上传 - 获取上传图片的大小

我已经更改了上传模板，以便为添加的每个文件显示可能的图像类型下拉列表。在点击上传之前，用户必须从下拉列表中选择要上传的文件的图像类型。

某些图像类型是精确的大小，有些只是最小宽度。我想要做的是将实际图像大小与选定的类型进行比较，以验证它们是否指示正确的类型。

我试图通过“fileuploadsubmit”回调做到这一点，我已经添加了一个检查，以确保在下拉列表中选择一个选项。

$('#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]; 
    }); 
    ...........

这是getImageSize函数。

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

}

的执行console.log（）在两个输出正常，但我不能让职能以外的这些数字来使用它们。我明白它与功能是异步的，但我无法弄清楚如何解决它。或者，也许有一个更好的jQuery文件上传内置选项我错过了。

我了解异步功能问题，这一个尝试找到解决方案来验证图像大小。我也试图在PHP脚本中做到这一点。它的工作原理是我可以防止图像上传，但用户体验很差。所以我仍然在寻找一个解决方案，以便如何使用jQuery File Upload进行图像大小验证。

下面是代码的更新版本。

$('#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 
});

来源

2017-07-25 Ryzone

的可能的复制*如何从一个异步回调函数*返回值：https://stackoverflow.com/questions/6847697/how-to-return-value-from-an-asynchronous-callback-function – kmoser

可能的重复[如何返回来自异步调用的响应？]（https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call） – Kaiido

与@kmoser达成一致，问题的根源在于您没有正确处理异步代码，但是您可能对[此Q/A]感兴趣（https://stackoverflow.com/questions/42540903/sort-在图库中的图像分辨率/）也是如此。 – Kaiido

我最终做的是删除实际的表单提交按钮，并将其替换为调用验证代码的按钮（不是类型提交）。如果它通过，那么表单通常会被提交（通过data.submit（）），否则返回错误。我不得不删除文件级别的提交按钮（或者我发现它更容易做到这一点）。

$('#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 
    });

来源

2017-08-17 02:54:31 Ryzone

jQuery文件上传 - 获取上传图片的大小

回答

相关问题