在jquery文件上传插件的fileuploadsend事件中检索jqXHR？

Question

我使用拖放来触发我的上传，所以我无法简单地从findupload（'send'）获取返回来获取jqXHR。

因此，在'fileuploadsend'事件中，我试图从数据对象中获取jqXHR元素，但data.jqXHR似乎是未定义的？

$('#fileupload') 
     .fileupload({ 
      ... 
     }).bind('fileuploadsend', function (e, data) { 
      console.log(data) 
      console.log(data.jqXHR) 
     }); 

输出用于数据对象显示是一个jqXHR元件存在，并且是一个对象，像这样：

jqXHR: Object 
abort: function (statusText) { 
always: function() { 
complete: function() { 
done: function() { 
error: function() { 
fail: function() { 
getAllResponseHeaders: function() { 
getResponseHeader: function (key) { 
overrideMimeType: function (type) { 
pipe: function (/* fnDone, fnFail, fnProgress */) { 
progress: function() { 
promise: function (obj) { 
readyState: 4 
responseText: "[{"url": "/media/pictures/392_frm_20130412081933_d3fee37c7a654dfca066ca3fa389b491.jpg", "filename": "waves_1600.jpeg", "sortDate": null, "albumId": 67, "published": false, "source_id": "pfi392", "thumbnailUrl": "/media/cache/a1/c1/a1c1d4f74614cf041b29e315a1f9a08a.jpg", "id": 499}]" 
setRequestHeader: function (name, value) { 
state: function() { 
status: 200 
statusCode: function (map) { 
statusText: "OK" 
success: function() { 
then: function (/* fnDone, fnFail, fnProgress */) { 
__proto__: Object 

但是无论什么原因，执行console.log（data.jqXHR）只是给未定义。

如果我运行for (k in data) { console.log(k) }然后jqXHR是无处可看到在上市：

disabled 
create 
dropZone 
pasteZone 
replaceFileInput 
singleFileUploads 
sequentialUploads 
forceIframeTransport 
multipart 
recalculateProgress 
progressInterval 
bitrateInterval 
formData 
add 
processData 
contentType 
cache 
url 
dataType 
fileInput 
files 
originalFiles 
paramName 
submit 
form 
type 
formAcceptCharset 
uploadedBytes 
headers 
data 
blob 
xhr 
_bitrateTimer 

Answer 1

我用jQuery的文件上传的基本加UI版本。

首先，将jquery.fileupload.ui.js的一部分粘贴到我的javascript fileupload源文件中。并修改了部分内容。

// Initialize the jQuery File Upload widget: 
$('#fileupload').fileupload({ 
    url: '/common/fileupload', 

    // pasted this part, If the file transfer successful 
    // 파일 전송에 성공하면 
    done: function (e, data) { 
     if (e.isDefaultPrevented()) { 
      return false; 
     } 
     var that = $(this).data('blueimp-fileupload') || 
       $(this).data('fileupload'), 
      getFilesFromResponse = data.getFilesFromResponse || 
       that.options.getFilesFromResponse, 
      files = getFilesFromResponse(data), 
      template, 
      deferred; 
     if (data.context) { 
      data.context.each(function (index) { 
       var file = files[index] || 
         {error: 'Empty file upload result'}; 
       deferred = that._addFinishedDeferreds(); 
       that._transition($(this)).done(
        function() { 
         var node = $(this); 
         template = that._renderDownload([file]) 
          .replaceAll(node); 
         that._forceReflow(template); 
         that._transition(template).done(
          function() { 
           data.context = $(this); 
           that._trigger('completed', e, data); 
           that._trigger('finished', e, data); 
           deferred.resolve(); 


           // It succeeded in using jqXHR, I was need of file auto increment id, 
           console.log("fileuploadsuccess", data.jqXHR.responseJSON.files_info[0]); 
           // and I called custom callback function. 
           fn_file_callback("fileuploadsuccess", e, data.jqXHR.responseJSON.files_info[0]); 
          } 
         ); 
        } 
       ); 
      }); 
     } else { 
      template = that._renderDownload(files)[ 
       that.options.prependFiles ? 'prependTo' : 'appendTo' 
      ](that.options.filesContainer); 
      that._forceReflow(template); 
      deferred = that._addFinishedDeferreds(); 
      that._transition(template).done(
       function() { 
        data.context = $(this); 
        that._trigger('completed', e, data); 
        that._trigger('finished', e, data); 
        deferred.resolve(); 
       } 
      ); 
     } 
    }, 

    // then pasted this part.. If the file remove done. 
    // 파일을 삭제하면 
    destroy: function (e, data) { 
     if (e.isDefaultPrevented()) { 
      return false; 
     } 
     var that = $(this).data('blueimp-fileupload') || 
       $(this).data('fileupload'), 
      removeNode = function() { 
       that._transition(data.context).done(
        function() { 
         $(this).remove(); 
         that._trigger('destroyed', e, data); 

         // add here, I called custom callback function about file deletion. 
         fn_file_callback("filedeletesuccess", e, data.url.replace("/common/deleteFile/", "")); 
        } 
       ); 
      }; 
     if (data.url) { 
      data.dataType = data.dataType || that.options.dataType; 
      $.ajax(data).done(removeNode).fail(function() { 
       that._trigger('destroyfailed', e, data); 
      }); 
     } else { 
      removeNode(); 
     } 
    } 
}); 

从这里休息。

// Enable iframe cross-domain access via redirect option: 
$('#fileupload').fileupload(
    'option', 
    'redirect', 
    window.location.href.replace(
     /\/[^\/]*$/, 
     '/cors/result.html?%s' 
    ) 
); 

if (window.location.hostname === 'localhost:8080') { 
    // Demo settings: 
    $('#fileupload').fileupload('option', { 
     url: '/common/fileupload', 
     disableImageResize: /Android(?!.*Chrome)|Opera/ 
      .test(window.navigator.userAgent), 
     maxFileSize: 999000, 
     acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i 
    }); 
    // Upload server status check for browsers with CORS support: 
    if ($.support.cors) { 
     $.ajax({ 
      url: '/common/fileupload', 
      type: 'HEAD' 
     }).fail(function() { 
      $('<div class="alert alert-danger"/>') 
       .text('Upload server currently unavailable - ' + 
         new Date()) 
       .appendTo('#fileupload'); 
     }); 
    } 
} else { 
    // Load existing files: 
    $('#fileupload').addClass('fileupload-processing'); 
    $.ajax({ 
     // Uncomment the following to send cross-domain cookies: 
     //xhrFields: {withCredentials: true}, 
     url: $('#fileupload').fileupload('option', 'url'), 
     dataType: 'json', 
     context: $('#fileupload')[0] 
    }).always(function() { 
     $(this).removeClass('fileupload-processing'); 
    }).done(function (result) { 
     $(this).fileupload('option', 'done') 
      .call(this, $.Event('done'), {result: result}); 
    }); 
} 

祝你好运！