XMLHttpRequest trong google-chrome không báo cáo sự kiện tiến

Question

Hi all Tôi có mã này:

function test() 
{ 
    req = new XMLHttpRequest(); 
    req.upload.addEventListener("progress", updateProgress, false); 
    req.addEventListener("readystatechange", updateProgress, false); 
    req.addEventListener("error", uploadFailed, false); 
    req.addEventListener("abort", uploadCanceled, false); 

    var data = generateRandomData(currentPayloadId); 
    totalSize = data.length; 

    req.open("POST", "www.mydomain.com/upload.aspx"); 
    start = (new Date()).getTime(); 
    req.send(data); 
} 

function updateProgress(evt) 
{ 
    if (evt.lengthComputable) { 
     total = totalSize = evt.total; 
     loaded = evt.loaded; 
    } 
    else { 
     total = loaded = totalSize; 
    } 
} 

Ngoài ra, máy chủ của tôi đáp ứng yêu cầu OPTIONS ban đầu cho upload.aspx với 200 và Access-Control-Allow -Origin: * và sau đó yêu cầu POST thứ hai xảy ra

Mọi thứ có vẻ đúng và nó hoạt động tốt trên FireFox nhưng trên G Chrome, trình xử lý UpdateProgress không được gọi nhưng chỉ một lần và sau đó độ dài có thể chấp nhận là sai.

tôi cần các xứ Access-Control-Allow-: * bởi vì đây là một cuộc gọi cross-domain, kịch bản mẹ là một nguồn tài nguyên trên một máy chủ khác nhau thì miền upload.aspx

Bất cứ ai có thể cho tôi một số đầu mối, gợi ý, xin vui lòng giúp đỡ? đây có phải là sự cố đã biết với G Chrome không?

Cảm ơn bạn! Ova

Answer 1

Trước tiên, hãy chắc chắn rằng "www.example.com" được thêm vào manifest.json, như vậy:

manifest.json

{ 
    .. 
    "permissions": [ 
    "http://www.example.com/", 
    "https://www.example.com/", 
    ], 
    .. 
} 

Sau đó, tôi nghĩ rằng ví dụ bạn nên làm việc.

For more information about using xhr in google chrome extensions the docs are here.

Ngoài ra the CSP docs đáng xem xét xem những gì tôi đã cung cấp ở trên có không.

Answer 2

Điều này có thể chỉ đơn giản là vấn đề tương thích với thuộc tính XMLHttpRequest.upload. Nó trả về một đối tượng XMLHttpRequestUpload, nhưng nếu bạn cố gắng tìm ra đặc tả đối tượng đó trong MDN thì nó không tồn tại, làm thế nào để chúng ta biết trình duyệt nào hỗ trợ đầy đủ nó.

XMLHttpRequest.upload tương thích

Các bạn đã thử nghe cho sự tiến bộ trực tiếp trên XHR:

req.addEventListener("progress", updateProgress, false); 

Answer 3

tôi sử dụng jQuery cho sự tiến bộ như thế:

$.ajax({ 
     url : furl, 
     type : method, 
     data : data, 
     //... 
     }, 
     xhr : function() { 
      //upload Progress 
      var xhr = $.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); 
         } 
         //update progressbar 
         $(".progress-bar").css("width", + percent + "%"); 
         $(" .status").text(position + "/" + total + " (" + percent + "%)"); 
        }, true); 
      } 
      return xhr; 
     }, 

Answer 4

Tôi nghĩ rằng tôi có một giải pháp cho bạn vấn đề
Tôi không biết những gì đằng sau chức năng này "generateRandomData()"

var data = generateRandomData(currentPayloadId) 

Nó đang làm việc khi tôi thay đổi thành này:

var data = new FormData(); 
data.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 

giải thích nhỏ: Bạn cần bằng tay để nối thêm để tạo dữ liệu của một hình thức đầu vào tập tin, nơi fileToUpload là <input type="file" name="fileToUpload" id="fileToUpload" />
Và trong chức năng updateProgress của bạn trong IF một phần, bạn có thể thêm thông tin như thế này để theo dõi tiến trình console.log(evt.total +" - "+ evt.loaded)

Điều này đang hoạt động trong Google Chrome trình duyệt. Tôi đã thử nghiệm phiên bản trình duyệt mới 57
Tôi đã tự tạo mẫu tiến trình tải lên 4 năm trước, điều này có nghĩa là mã này cũng đang hoạt động trong phiên bản trình duyệt cũ.

Một đoạn mã toàn bộ sẽ được xem xét như thế này

function test() 
{ 
    req = new XMLHttpRequest(); 
    req.upload.addEventListener("progress", updateProgress, false); 
    req.addEventListener("readystatechange", updateProgress, false); 
    req.addEventListener("error", uploadFailed, false); 
    req.addEventListener("abort", uploadCanceled, false); 

    //var data = generateRandomData(currentPayloadId); 
    var data = new FormData(); 
    data.append("fileToUpload", document.getElementById('fileToUpload').files[0]); 
    totalSize = data.length; 

    req.open("POST", "www.mydomain.com/upload.aspx"); 
    start = (new Date()).getTime(); 
    req.send(data); 
} 

function updateProgress(evt) 
{ 
    if (evt.lengthComputable) { 
     total = totalSize = evt.total; 
     loaded = evt.loaded; 
     console.log(evt.total +" - "+ evt.loaded) 
    } 
    else { 
     total = loaded = totalSize; 
    } 
} 

Answer 5

Tôi có vấn đề này khi trang của bạn đang tải không chứa một

Content-Length: 12345 

trong tiêu đề, nơi 12345 là độ dài của phản hồi theo byte. Không có tham số chiều dài, hàm tiến trình không có gì để làm việc.