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

Question

我正在使用jQuery文件上传来上传产品图片。每种产品都有不同的"类型"图像(不同的尺寸/尺寸(。

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

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

我正在尝试通过"文件上传提交"回调执行此操作，我已经在其中添加了一个检查以确保在下拉列表中选择一个选项。

$('#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文件上传进行图像大小验证的解决方案。

下面是代码的更新版本。

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

我最终做的是删除实际的表单提交按钮，并将其替换为调用验证代码的按钮(不是类型提交(。 如果通过，则表单将正常提交(通过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
});