Chức năng onprogress có thể được thêm vào jQuery.ajax() bằng cách sử dụng xhrFields không?

Question

Như được đề xuất ở đây: https://gist.github.com/HenrikJoreteg/2502497, Tôi đang cố gắng thêm chức năng onprogress vào tệp tải lên jQuery.ajax() của mình. Quá trình tải lên hoạt động tốt và sự kiện onprogress đang kích hoạt, nhưng không phải như tôi mong đợi - thay vì bắn liên tục tại một khoảng thời gian nào đó, nó chỉ kích hoạt một lần khi quá trình tải lên hoàn tất. Có cách nào để xác định tần suất làm mới trên đầu không? Hay, tôi đang cố gắng làm điều gì đó không thể làm được? Đây là mã của tôi:

$.ajax(
{ 
    async: true, 
    contentType: file.type, 
    data: file, 
    dataType: 'xml', 
    processData: false, 
    success: function(xml) 
    { 
     // Do stuff with the returned xml 
    }, 
    type: 'post', 
    url: '/fileuploader/' + file.name, 
    xhrFields: 
    { 
     onprogress: function(progress) 
     { 
      var percentage = Math.floor((progress.total/progress.totalSize) * 100); 
      console.log('progress', percentage); 
      if (percentage === 100) 
      { 
       console.log('DONE!'); 
      } 
     } 
    } 
}); 

Answer 1

Bạn cần thêm trình xử lý sự kiện vào yêu cầu trước khi gửi đi. jQuery.ajax cho phép điều này thông qua tài sản 'beforeSend' http://api.jquery.com/jQuery.ajax/

ví dụ: http://www.dave-bond.com/blog/2010/01/JQuery-ajax-progress-HMTL5/

* EDIT * Hãy chắc chắn để xem xét các mẫu mã thứ hai của rằng ví dụ liên kết. Tôi tin rằng cái đầu tiên đã lỗi thời với các phiên bản jQuery hiện đại.

$.ajax({ 
    xhr: function() 
    { 
    var xhr = new window.XMLHttpRequest(); 
    //Upload progress 
    xhr.upload.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with upload progress 
     console.log(percentComplete); 
     } 
    }, false); 
    //Download progress 
    xhr.addEventListener("progress", function(evt){ 
     if (evt.lengthComputable) { 
     var percentComplete = evt.loaded/evt.total; 
     //Do something with download progress 
     console.log(percentComplete); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/", 
    data: {}, 
    success: function(data){ 
    //Do something success-ish 
    } 
}); 

Answer 2

Câu trả lời ngắn:
Không, bạn không thể làm những gì bạn muốn sử dụng xhrFields.

dài câu trả lời:

Có hai sự kiện tiến bộ trong một đối tượng XMLHttpRequest:

• Tiến độ phản ứng (XmlHttpRequest.onprogress)
  Đây là khi trình duyệt được tải dữ liệu từ máy chủ.

• Tiến độ yêu cầu (XmlHttpRequest.upload.onprogress)
  Đây là khi trình duyệt được gửi dữ liệu đến máy chủ (bao gồm các thông số POST, cookies, và các tập tin)

Trong mã của bạn, bạn đang sử dụng sự kiện tiến độ phản hồi, nhưng những gì bạn cần là sự kiện tiến độ yêu cầu. Đây là cách bạn làm điều đó:

$.ajax({ 
    async: true, 
    contentType: file.type, 
    data: file, 
    dataType: 'xml', 
    processData: false, 
    success: function(xml){ 
     // Do stuff with the returned xml 
    }, 
    type: 'post', 
    url: '/fileuploader/' + file.name, 
    xhr: function(){ 
     // get the native XmlHttpRequest object 
     var xhr = $.ajaxSettings.xhr() ; 
     // set the onprogress event handler 
     xhr.upload.onprogress = function(evt){ console.log('progress', evt.loaded/evt.total*100) } ; 
     // set the onload event handler 
     xhr.upload.onload = function(){ console.log('DONE!') } ; 
     // return the customized object 
     return xhr ; 
    } 
}); 

Lựa chọn thông số xhr phải là một hàm trả về một đối tượng XMLHttpRequest bản địa cho jQuery để sử dụng.