XHR Level2 с jQuery для загрузки файлов

Question

Как я могу получить доступ к необработанному объекту XHR из jQuery Ajax?Дело в том, что новая спецификация XMLHttpRequest Level 2 предоставляет под-свойство XHR, называемое upload, но, очевидно, у jQuery его пока нет.Я хочу продолжать использовать jQuery Ajax, но не знаю, как объединить новую функциональность с текущей библиотекой jQuery.

Answer 1

В новых версиях JQuery необработанный объект xhr обернут в объект jqXhr, который не имеет никакой ссылки на новое свойство загрузки xhr, и в документации также не очень ясно, как это сделать. я нашел способ сделать это с некоторыми дополнительными настройками для успешного загрузки файла jquery-ajax-HTML5:

var formData = new FormData($('#myForm')[0]);
$.ajax({
    url: 'upload.php',
    type: 'POST',
    xhr: function() {
        myXhr = $.ajaxSettings.xhr();
        if(myXhr.upload){
            myXhr.upload.addEventListener('progress',progressHandlerFunction, false);
        }
        return myXhr;
    },
    data: formData,
    cache: false,
    contentType: false,
    processData: false
});

с $ .ajaxSettings.xhr () Я получаю исходный xhr, затем проверяю, есть ли у него свойство загрузки для привязки события прогресса для управления индикатором прогресса (HTML5?). Другие настройки позволяют мне отправлять через jquery ajax форму в виде объекта FormData.

Answer 2

Небольшая модификация ответа DannYO. Я сделал плагин jQuery, который вы можете вызвать для ввода файла, чтобы сделать его проще. Вы просто передаете ему свой скрипт загрузки, затем свою функцию успеха и затем свою функцию прогресса.

$.fn.upload = function(remote,successFn,progressFn) {
    return this.each(function() {

        var formData = new FormData();
        formData.append($(this).attr("name"), $(this)[0].files[0]);

        $.ajax({
            url: remote,
            type: 'POST',
            xhr: function() {
                myXhr = $.ajaxSettings.xhr();
                if(myXhr.upload && progressFn){
                    myXhr.upload.addEventListener('progress',progressFn, false);
                }
                return myXhr;
            },
            data: formData,
            cache: false,
            contentType: false,
            processData: false,
            complete : function(res) {
                if(successFn) successFn(res);
            }
        });
    });
}

Использование

$(".myFile").upload("upload.php",function(res) {
    console.log("done",res);
},function(progress) {
    console.log("progress", progress);
});