Question

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

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

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

我无法处理选项，

imageMaxWidth：1500， imageMaxHeight：1200， imageQuality：0.8， imageCrop：false

在我使用的其他项目中：

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

但那不能在这里告诉我$这是未定义的，所以我需要帮助这个PLZ

这是我的按钮代码：

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

有些评论是西班牙语，但我留下他们就是因为我认为他们是无关紧要的

我会感激任何帮助

由于

Answer 1

$这不存在......

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

'this'是对add（）函数范围内的HtmlInputFile DOM元素的引用，因此以下内容现在可以正常工作。

返回$ this.fileupload（'process'，data）;

fileupload（）函数存在于HtmlInputFile控件的jquery对象上，问题的根本原因是你没有访问过jquery对象。您可以通过DOM再次访问它，因此以下内容也可以正常工作。

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

关于'this'关键字的一点点：

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

超出了你的问题的范围：

您可能希望重新分解代码以从构造函数中删除事件。 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
}

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

1 个答案: