javascript - 在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-fileupload 的 basic plus UI 版本。

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

// 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();
        }
    }
});

From here the rest.

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

祝你好运!