Question

我正在使用jQuery文件上传来上传产品图片。有不同的＆＃34;类型＆＃34;每种产品的图像（不同尺寸/尺寸）。

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

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

我试图通过＆＃34; fileuploadsubmit＆＃34;回调，我已经添加了一个检查，以确保在下拉列表中选择了一个选项。

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

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

1 个答案: