Thêm hủy tải lên hoặc hủy bỏ chức năng để khởi động nhiều plugin tải lên tệp

Question

Tôi đang sử dụng bootstrap multiple file upload plugin để tải lên tệp. Tôi đang sử dụng ví dụ trên liên kết này. Bây giờ tôi muốn thêm một nút "Hủy tải lên" bên cạnh nút "Thêm tệp". Khi nhấp vào nút "Hủy tải lên", quá trình tải lên sẽ bị dừng lại. Xin hãy giúp tôi để giải quyết vấn đề này. Cảm ơn

Answer 1

Cuối cùng, sau khi thử nghiệm rộng rãi và sai sót và tìm kiếm các giải pháp mã có liên quan, tôi làm cho nó hoạt động chính xác theo cách tôi muốn! Tôi đã đăng truy vấn của mình trên số plugin's github issue page và nhận trợ giúp từ đó.

Dưới đây là các mẫu mã mà thực sự làm việc:

1.First bạn có để ràng buộc sự kiện fileuploadadd:

$('#fileupload').bind('fileuploadadd', function(e, data){ 
     var jqXHR = data.submit(); // Catching the upload process of every file 
     $('#cancel_all').on('click',function(e){ 
      jqXHR.abort(); 
     }); 
}); 

2.Then bạn có để ràng buộc sự kiện hủy mà sẽ được gọi khi nhấp vào nút "Hủy tải lên", thao tác này sẽ hủy tất cả các tệp hiện đang được tải lên:

$('#fileupload').bind('fileuploadfail', function(e, data){ 
    if (data.errorThrown === 'abort') 
    { 
     //PUT HERE SOME FEEDBACK FOR THE USER 
    } 
}); 

Answer 2

Tôi nghĩ rằng bạn có thể tìm thấy câu trả lời trong các tài liệu của các plugin từ here, tôi gửi mã ở đây:

var jqXHR = $('#fileupload').fileupload('send', {files: filesList}) 
    .error(function (jqXHR, textStatus, errorThrown) { 
     if (errorThrown === 'abort') { 
      alert('File Upload has been canceled'); 
     } 
    }); 
$('button.cancel').click(function (e) { 
    jqXHR.abort(); 
}); 

Đoạn mã trên có nghĩa là tải lên các file lập trình (mannually). Trong trường hợp này, đối với hàm tải tệp, đối số thứ hai phải là một đối tượng có một mảng (hoặc danh sách giống mảng) của các đối tượng Tệp hoặc Blob dưới dạng thuộc tính tệp. Vì vậy, bạn cần phải nhận được mảng file trước khi bạn thực hiện trên mã:

var filesList = $("#fileupload").get().files; 

Tôi không chắc chắn cho dù bạn cần phải chuyển đổi FileList để mảng như dưới đây, nhưng bạn có thể thử:

var i,files = $("#fileupload").get().files,filesList=[]; 
for(i=0;i<files.length;i++){ 
    filesList.push(files.item(i)) 
} 

Nhưng lưu ý rằng có những hạn chế ở đây: Tệp chỉ được hỗ trợ với IE10 + và các trình duyệt hiện đại khác.

Để biết thêm thông tin, tôi liệt kê một số điều ở đây:

1. jQuery-File-Upload Programmatic file upload
2. Using files from web application
3. FileList API