Blueimp 的 Jquery 上传，我的文件的处理选项

Question

我使用 Blueimp 的 Jquery 上传插件将多个文件上传到我的服务器并添加了信息。

舞台是这样的，我有添加文件按钮和保存到服务器按钮，我在这里所做的是在添加回调中创建我的表以显示我准备添加的文件。我在每个表格行上创建了一个隐藏的提交按钮和一个取消按钮以从队列中删除文件。

当我点击“保存到服务器”按钮时，它会从行中调用所有隐藏的“提交”按钮，并且上传效果很好，到目前为止一切顺利。

我在处理选项时遇到问题，

imageMaxWidth: 1500, 图像最大高度：1200， 图像质量：0.8， 图像裁剪：假

在我使用过的其他项目中：

                data.process(function () {
                    return $this.fileupload('process', data);
                }).done(function() {
                    data.submit();
                });

但这在这里不起作用，告诉我 $this 是未定义的，所以我需要帮助来解决这个问题

这是我的按钮代码：

var cancel_btn = $('<button/>')
.addClass('btn btn-warning cancel pull-right')
.html('<i class="icon-ban-circle icon-white"></i><span> Cancel');

var upload_btn = $('<button/>')
    .addClass('btn btn-warning upload pull-right hidden')
    .html('<i class="icon-ban-circle icon-white"></i><span> Upload');

//this is my "Save to Server" button
$('.guardar').on('click', function(e){
    e.preventDefault();
    $('.upload').click();
});

这是我的文件上传代码：

$('#fileupload').fileupload({
    url: CI.base_url + 'admin/do_upload',
    dataType: 'json',
    disableImageResize:  /Android(?!.*Chrome)|Opera/
        .test(window.navigator.userAgent),
    imageMaxWidth: 1500,
    imageMaxHeight: 1200,
    imageQuality: 0.8,
    imageCrop: false,
    add: function (e, data) { 
        //Se checa si son imagenes
        var fileType = data.files[0].name.split('.').pop(), allowdtypes = 'jpeg,jpg,png,gif,JPEG,JPG,PNG,GIF';
             if (allowdtypes.indexOf(fileType) < 0) {
                alert('Solo puedes cargar imágenes .jpg, .png y .gif');
                goUpload = false;
                return false;
        }//Se termina de revisar si son imagenes

        //Se checa si el tamaño no excede de 3 MB
        if(data.files[0].size > 3300000){
            alert('La Imagen no puede pesar mas de 3MB.');
            goUpload = false;
            return false;
        }//Termina el chequeo si la imagen es de mas de 3MB o no

        $.each(data.files, function (index, file) {

            var tr = document.createElement('tr');
            data.context = $(tr);
            var td1 = document.createElement('td');
            var td2 = document.createElement('td');
            var td3 = document.createElement('td');
            var td4 = document.createElement('td');
            var td5 = document.createElement('td');
            var td6 = document.createElement('td');

            var img_src = '';
            img_src = URL.createObjectURL(data.files[0]);

            $(td1).append('<img class="imagen_preview" src="' + img_src + '"/>');
            $(td2).append(file.name);
            $(td3).append(file.size);
            $(td4).append(cancel_btn.clone(true).data(data));
            $(td5).append(upload_btn.clone(true).data(data));
            $(td6).append('<input type="text" name="precio" class="input_precio">');
            $(tr).append(td1,td2,td3,td4, td5, td6);
            $('#files_list tbody').append(tr);

            //Here i add the submit handler to each submit button
            $('.upload').eq(-1).on('click',function(e){//button to upload only this file
                  e.preventDefault();
                  //data.submit();

                  //this is the code thats not working, it doesnt process my options
                  data.process(function () {
                    //return $this.fileupload('process', data);
                  }).done(function() {
                    data.submit();
                  });
             });

            $('.cancel').on('click', function(e){
                e.preventDefault();
                $(this).parent().parent().remove();
            })
        });
    },
    progressall: function (e, data) {
       var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.bar').show();
        $('#progress .bar').css(
            'width',
            progress + '%'
        ).text(progress);
    },
    submit: function(e, data){
        var input = data.context.find('.input_precio').val();
        data.formData = ({'costo': input});

    },
    done: function(e, data){
        console.log(data);
        var nombre_archivo = data.result.files[0].name;
        var nombre_coleccion = $('#nombre_coleccion').val();
        var pensamiento = $('#texto_pensamiento').val();
        var costo = data.formData.costo;
        var arreglo = {nombre: nombre_archivo, nombre_coleccion: nombre_coleccion, pensamiento: pensamiento, costo:costo};

        $.post(CI.base_url + 'admin/agregar_archivos', arreglo , function(success){
            //alert(success);
        });
    },
    stop: function(e){
        alert('se termino');
    }
});

有些 cmets 是西班牙语，但我就这样放着它们，因为我认为它们无关紧要

我会很感激任何帮助

谢谢

Answer 1

$this 不存在...

// Put this just inside the add function, 1st line
var $this = $(this);

'this' 是在 add() 函数范围内时对 HtmlInputFile DOM 元素的引用，因此现在应该可以执行以下操作。

return $this.fileupload('process', data);

fileupload() 函数存在于 HtmlInputFile 控件的 jquery 对象上，问题的根本原因是您没有访问 jquery 对象。您可以通过 DOM 再次访问它，因此以下内容也应该有效。

return $('#fileupload').fileupload('process', data);

关于“this”关键字的一点点：

'this' 关键字是对所述函数的被调用者的引用，因为在 add 函数中有多个函数，每个函数都会在函数范围内更改 this 的上下文。我建议进一步阅读 JavaScript 中的 this 关键字和范围，这是该语言的基础。

超出您的问题范围：

您可能需要重构代码以从构造函数中删除事件。 IMO 这将使代码更易于管理和测试，也许是这样的......

var _$uploadControl = $('#fileupload');

function _start() {
    var options;

    options = {
        url: '',
        dataType: '',
        etc...
    };

   _$uploadControl.fileupload(options);

   _$uploadWidget.on('fileuploadadd', function (e, data) { _fileAddedToUpload(data); });
   _$uploadWidget.on('fileuploadprogressall', function (e, data) { _filesUploadProgress(data);
}

function _fileAddedToUpload(data){
   // Add logic

  data.process(function () {
      return _$uploadControl.fileupload('process', data);
  }).done(function() {
      data.submit();
  });
}

function _filesUploadProgress(data){
    // Progress bar logic
}