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

祝你好運！