Nhận tiến trình tải lên của các tệp riêng lẻ bằng XMLHttpRequest

Question

Tôi đang sử dụng XMLHttpRequest (với jQuery) để có được tiến trình tải lên của nhiều tệp. Bằng cách thêm trình xử lý sự kiện "tiến trình" vào đối tượng XMLHttpRequest, tôi có thể nhận được event.loaded và event.total. Các biến này cho tôi các byte được tải và tổng số của tất cả các tệp được kết hợp.

Điều tôi muốn làm là lấy tiến trình của từng tệp riêng lẻ, nhưng từ những gì tôi có thể thấy thông tin đó không có sẵn với XMLHttpRequest. Điều đó có đúng không?

Tôi không nghĩ rằng đây là thậm chí cần thiết, nhưng đây là mã của tôi:

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); 
     } 
     updateProgressBar(percent); 
    }, false); 
} 
return xhr; 

Nếu tôi có thể thực hiện điều này với XMLHttpRequest đó sẽ là tuyệt vời. Bất kỳ thông tin về điều này sẽ được đánh giá cao.

Answer 1

Đây là những gì tôi sử dụng,

$.ajax({ 
    xhr: function() { 
     myXhr = $.ajaxSettings.xhr(); 
     myXhr.addEventListener('progress', function (e) { }, false); 
     if (myXhr.upload) { 
      myXhr.upload.onprogress = function (e) { 
       var completed = 0; 
       if (e.lengthComputable) { 
        var done = e.position || e.loaded, 
         total = e.totalSize || e.total; 
        completed = Math.round((done/total * 1000)/10); 
       } 
       console.log(completed); // Displays the completed percentage 
      } 
     } 
     return myXhr; 
    } 
}); 

Answer 2

Bạn có thể sử dụng Javascript Plugin Dropzone.js. Ông xử lý tập tin từng người một, thanh tiến trình hiển thị cho mỗi file, dễ dàng tích hợp, hỗ trợ điện thoại di động, kéo-và-thả, ...

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://www.dropzonejs.com/new-js/dropzone.js"></script> 
 
<link rel="stylesheet" href="http://www.dropzonejs.com/css/dropzone.css" /> 
 
<link rel="stylesheet" href="http://www.dropzonejs.com/css/style.css" /> 
 

 
<form action="/page_where_upload" class="dropzone"> 
 
    <div class="fallback"> 
 
    <input name="file" type="file" multiple /> 
 
    </div> 
 
</form>

Nếu bạn cố gắng chạy đoạn mã, bạn sẽ gặp lỗi máy chủ vì page_where_upload không tồn tại!