Quá trình tải lên XHR là 100% kể từ khi bắt đầu

Question

Tôi đang thử tính năng XMLHTTPRequestUpload mới để tải lên một số tệp vào tập lệnh php, nó hoạt động tốt, tải lên bắt đầu, tôi nhận được phản hồi kết thúc, v.v. dường như không hoạt động.

Tìm giá trị event.loaded - Trong firefox tôi dường như nhận được một giá trị ngẫu nhiên giữa 0 và kích thước tệp; trong Chrome (nơi tôi đang làm việc chủ yếu), tôi nhận được tổng kích thước tệp, mặc dù người đọc chưa đạt đến '4' và cửa sổ Công cụ dành cho nhà phát triển vẫn hiển thị tệp đang tải?

Bất kỳ ý tưởng nào?

Heres mã của tôi:

var xhr = new XMLHttpRequest() 

xhr.upload.addEventListener('progress', function(event) { 
    if (event.lengthComputable) { 
     $('ajaxFeedbackDiv').innerHTML = event.loaded + '/' + event.total; 
    } 
}, false); 

xhr.onreadystatechange = function(event) { 
    if (event.target.readyState == 4) { 
     updateFileList(); 
    } 
}; 

xhr.open("POST", "_code/upload.php"); 
xhr.setRequestHeader("Cache-Control", "no-cache"); 
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest"); 
xhr.setRequestHeader("X-File-Size", file.size); 
xhr.setRequestHeader("X-File-Type", file.type); 
xhr.setRequestHeader("Content-Type", "multipart/form-data"); 
xhr(file); 

Rất cám ơn

Bến

Answer 1

Tôi cũng vừa mới có một số khó khăn thiết lập một event listener cho XHR onprogress sự kiện. Tôi đã kết thúc việc thực hiện nó như một chức năng ẩn danh, mà làm việc đẹp:

xhr.upload.onprogress = function(evt) 
{ 
    if (evt.lengthComputable) 
    { 
     var percentComplete = parseInt((evt.loaded/evt.total) * 100); 
     console.log("Upload: " + percentComplete + "% complete") 
    } 
}; 

tôi stumbled trên một nhiều gotchas khác trên đường đi, tuy nhiên, do đó, nó rất có thể một trong những bị vấp ngã lên người nghe sự kiện của tôi . Sự khác biệt duy nhất giữa những gì bạn đã có và thiết lập của tôi là tôi đang sử dụng xhr.sendAsBinary().

Answer 2

Tôi cũng gặp sự cố tương tự, trong đó chức năng xử lý sự kiện cho sự kiện progress trên XMLHttpRequest chỉ được thực thi một lần - khi quá trình tải lên hoàn tất.

Nguyên nhân của sự cố đã trở nên đơn giản - trong Google Chrome (có thể cả các trình duyệt khác, tôi không kiểm tra), sự kiện progress sẽ chỉ kích hoạt nếu tải lên đã chạy trong một hoặc hai giây. Nói cách khác, nếu quá trình tải lên của bạn kết thúc nhanh chóng, thì bạn có thể chỉ nhận được một sự kiện 1002 progress.

Dưới đây là một ví dụ về mã mà progress sự kiện chỉ bắn một lần tại hoàn thành 100% (https://jsfiddle.net/qahs40r6/):

$.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; 
     console.log("Upload ", Math.round(percentComplete*100) + "% complete."); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/echo/json/", 
    data: {json: JSON.stringify(new Array(20000))} 
}); 

điều khiển đầu ra:

Upload 100% complete. 

Nhưng nếu bạn bổ sung thêm một số không đến kích thước của mảng (tăng kích thước tải trọng theo hệ số là 10 - https://jsfiddle.net/qahs40r6/1/):

$.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; 
     console.log("Upload ", Math.round(percentComplete*100) + "% complete."); 
     } 
    }, false); 
    return xhr; 
    }, 
    type: 'POST', 
    url: "/echo/json/", 
    data: {json: JSON.stringify(new Array(200000))} 
}); 

Sau đó, bạn sẽ có được sự tiến triển bình thường của progress sự kiện:

Upload 8% complete. 
Upload 9% complete. 
Upload 19% complete. 
Upload 39% complete. 
Upload 50% complete. 
Upload 81% complete. 
Upload 85% complete. 
Upload 89% complete. 
Upload 100% complete. 

Hành vi này phụ thuộc vào tốc độ kết nối Internet của bạn, vì vậy mileage của bạn sẽ thay đổi. Ví dụ: nếu bạn lấy ví dụ đầu tiên và sử dụng Công cụ nhà phát triển Chrome để làm chậm kết nối của bạn thành mô phỏng "3G chậm", thì bạn sẽ thấy chuỗi sự kiện progress.

Tương tự, nếu bạn đang phát triển cục bộ và tải dữ liệu lên máy chủ web cục bộ, bạn có thể sẽ không bao giờ thấy sự kiện progress vì quá trình tải lên sẽ kết thúc ngay lập tức. Đây là khả năng những gì @brettjonesdev đã được nhìn thấy trong localhost vs triển khai prod từ xa.