Trình tải lên Ajax Valums (Mutli) - Phát hiện khi tất cả các tệp được tải lên

Question

Tôi đang sử dụng Trình tải lên Ajax Valums để tải lên một loạt tệp. Gần đây, chúng tôi đã thay đổi mã từ một loại tải lên đa tải lên. Điều này đã gây ra sự cố với mã của chúng tôi.

Như bạn thấy, khi cháy sự kiện onComplete, chúng tôi sẽ tải lại trang để hiển thị hình ảnh mới tải lên. Tuy nhiên, sự kiện onComplete dường như được kích hoạt sau khi tệp EACH hoàn tất, chứ không phải sau khi toàn bộ lô thực hiện. Điều này gây ra sự cố bởi vì khi tệp đầu tiên kết thúc, lần tải lại trang được kích hoạt và trình tải lên bật lên cảnh báo "Nếu bạn rời khỏi trang này, tất cả mọi thứ sẽ bị xóa trên các video tải lên còn lại của bạn" - hoặc điều gì đó có hiệu lực.

Tôi nhận thấy sự kiện onComplete gửi lại ID dựa trên 0 của tệp hoàn thành, nhưng tôi không chắc chắn chính xác cách sử dụng để xác định thời điểm thực hiện lô.

Tôi đoán câu hỏi của tôi là A) Có sự kiện khác kích hoạt khi tất cả các tệp hoàn thành hoặc B) Làm cách nào để xác định số lượng tệp mà người dùng đã chọn để theo dõi trong sự kiện onComplete đã hoàn thành?

var uploader = new qq.FileUploader({ 
     multiple: true, 
     element: document.getElementById('file-uploader'), 
     action: '/projectPhotoUpload.php', 
     allowedExtensions: ['jpg', 'png', 'gif'], 
     debug: true, 
     params: {id: i}, 
     onComplete: function(id, fileName, responseJSON){ 
      window.location = 'projects.php?all=true&tab=1&sel=' + currProject;         
     } 
    }) 

Answer 1

Bạn có thể thêm bộ đếm tăng khi quá trình tải lên bắt đầu và giảm khi hoàn tất. Chỉ chuyển hướng về hoàn tất khi bộ đếm là 0.

var running = 0; 
var uploader = new qq.FileUploader({ 
    multiple: true, 
    element: document.getElementById('file-uploader'), 
    action: '/projectPhotoUpload.php', 
    allowedExtensions: ['jpg', 'png', 'gif'], 
    debug: true, 
    params: {id: i}, 
    onSubmit: function(id, fileName){ 
     running++;         
    }, 
    onComplete: function(id, fileName, responseJSON){ 
     running--; 
     if(running==0){ 
      window.location = 'projects.php?all=true&tab=1&sel=' + currProject;         
     } 
    } 
}) 

Answer 2

Tốt câu trả lời, ra khỏi sự quan tâm nếu bạn muốn kiểm tra responseJSON để xem nếu các tập tin đã được tải lên, đặt nó trên kịch bản máy chủ

return array('success'=>true, 'filename'=>$filename . '.' . $ext); 

Sau đó, bạn có thể nhặt nó lên trong JS như

var success = responseJSON["success"] 
var filename = responseJSON["filename"] 

Bằng cách này bạn có thể làm cho một danh sách các tập tin và kiểm tra tên trên hoàn thành, hoặc chỉ giảm giá trị

if (success == true) 

Nếu upload đã thất bại, thì bạn có thể không muốn nó giảm giá trị ví dụ

Answer 3

Bạn sẽ cần phải thêm một sự kiện hủy bỏ trong trường hợp người dùng hủy bỏ ra khỏi một tập tin tải lên:

onCancel: function(id, fileName){running--;} 

Tôi đang tranh luận về cách tiếp cận phù hợp để thực hiện ở đây khi triển khai. Tôi cũng muốn chuyển hướng trang một khi các tệp được tải lên nhưng điều gì sẽ xảy ra nếu người dùng dự định tải lên nhiều tệp hơn; các tệp có thể được trải ra trong các thư mục riêng biệt.

Có vẻ như cách tiếp cận tốt nhất là có nút "Tôi đã hoàn tất" sẽ chuyển hướng sau khi người dùng tải lên xong.

Answer 4

Cách đơn giản hơn là sử dụng thuộc tính bên trong _filesInProgress để kiểm tra xem tất cả các tệp đã tải lên đã được xử lý chưa. Nó sẽ cung cấp cho:

var uploader = new qq.FileUploader({ 
    multiple: true, 
    element: document.getElementById('file-uploader'), 
    action: '/projectPhotoUpload.php', 
    allowedExtensions: ['jpg', 'png', 'gif'], 
    debug: true, 
    params: {id: i}, 
    onComplete: function(id, fileName, responseJSON){ 
     if(uploader._filesInProgress == 0){ 
      window.location = 'projects.php?all=true&tab=1&sel=' + currProject; 
     }         
    } 
});