jquery ajax progress deferred

Question

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

var ajaxFileUpload = new $.ajax({ 
      type:'POST', 
      url:"/popup/file_upload.php", 
      data:_private.appendFormData(file), 
      contentType:false, 
      processData:false 

     }).progress(function (event) { 
       console.log(event); 
      }) 
      .done(function (response) { 
       console.log("done"); 


      }) 
      .fail(function (event) { 
       console.log("fail"); 
      })}}; 

Answer 1

Загрузить Прогресс

Если вы хотите прогресс бар при загрузке вы можете посмотреть на https://github.com/malsup/form/blob/master/jquery.form.js линий 292-309 (это JQuery плагин, но можно просто вытащить, что маленький кусочек для использования без плагин).

s.xhr = function() { 
    var xhr = jQuery.ajaxSettings.xhr(); 
    if (xhr.upload) { 
     xhr.upload.addEventListener('progress', function(event) { 
      var percent = 0; 
      var position = event.loaded || event.position; 
      var total = event.total; 
      if (event.lengthComputable) { 
       percent = Math.ceil(position/total * 100); 
      } 
      options.uploadProgress(event, position, total, percent); 
     }, false); 
    } 
    return xhr; 
}; 

Скачать Прогресс

Если вы хотите индикатор на загрузки вы можете посмотреть на http://www.w3.org/TR/progress-events/ для примера кода. Ваш сервер должен дать в заголовке ответа для этого, я считаю.

var progressBar = document.getElementById("p"), 
    client = new XMLHttpRequest() 
client.open("GET", "magical-unicorns") 
client.onprogress = function(pe) { 
if(pe.lengthComputable) { 
    progressBar.max = pe.total 
    progressBar.value = pe.loaded 
} 
} 
client.onloadend = function(pe) { 
progressBar.value = pe.loaded 
} 
client.send() 

Сервер Прогресс

Если вы работаете отчет, который занимает некоторое время, и вы хотите, ход обработки сервера, может я предлагаю изменить его, чтобы быть несколько запросов Ajax: beginFoo, getFooProgress, getFooResult. Другие методы включают использование соединения COMET или Websocket для передачи информации о прогрессе с сервера или отдельного вытягивающего веб-сервиса, в то время как первоначальный запрос ajax ожидает ответа.

Примечание: прохладный новый элемент < прогресса> в html5

Если вы хотите прогресс html5 элемента: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress.

Answer 2

Я нашел это на GitHub, чтобы получить XHR2 progress event in jQuery, с загрузки и загрузки обратных вызовов:

(function addXhrProgressEvent($) { 
    var originalXhr = $.ajaxSettings.xhr; 
    $.ajaxSetup({ 
     xhr: function() { 
      var req = originalXhr(), that = this; 
      if (req) { 
       if (typeof req.addEventListener == "function" && that.progress !== undefined) { 
        req.addEventListener("progress", function(evt) { 
         that.progress(evt); 
        }, false); 
       } 
       if (typeof req.upload == "object" && that.progressUpload !== undefined) { 
        req.upload.addEventListener("progress", function(evt) { 
         that.progressUpload(evt); 
        }, false); 
       } 
      } 
      return req; 
     } 
    }); 
})(jQuery); 



// usage: 
// note, if testing locally, size of file needs to be large enough 
// to allow time for events to fire 

$.ajax({ 
    url: "./json.js", 
    type: "GET", 
    dataType: "json", 
    complete: function() { console.log("Completed."); }, 
    progress: function(evt) { 
     if (evt.lengthComputable) { 
      console.log("Loaded " + parseInt((evt.loaded/evt.total * 100), 10) + "%"); 
     } 
     else { 
      console.log("Length not computable."); 
     } 
    }, 
    progressUpload: function(evt) { 
     // See above 
    } 
}); 

С небольшим количеством работы он может быть адаптирован для вызова .progress() отложила обратного вызова, а не обратного вызова, указанного в объекте настройки ,

Answer 3

Хорошим вариантом является переписать вашу функцию ajax с помощью пользовательской отложенной, поэтому вы можете предоставить метод прогресса с обновлениями из $ .Deferred.notify(). Вы могли бы сделать что-то вроде этого:

function doAjax() { 
    var deferred = $.Deferred(); 

    $.ajax({ 
    type:'POST', 
    url:"/popup/file_upload.php", 
    success: deferred.resolve, // resolve it 
    error: deferred.reject, // reject it 
    xhrFields: { 
     onprogress: function (e) { 
     if (e.lengthComputable) { 
      deferred.notify(parseInt(e.loaded/e.total * 100), 10); // notify as a factor of the event object 
     } 
     } 
    } 
    } 

    return deferred.promise(); 
} 

doAjax() 
    .done(function(data) {}) 
    .fail(function() {}) 
    .progress(function(value) { // notify value is available as the param 
    console.log('Progress: ', value + "%"); // output 
    } 
); 

Выход это текст или заполнить прогресс элемент HTML5 http://jsbin.com/wevolosa/2/edit?html,console,output