Jak usunąć plik z kolejki, aby zatrzymać przesyłanie przed rozpoczęciem przesyłania w blueimp Basic?

Question

Oto rzecz,

Chcę przycisk podobny do Basic Plus UI jQuery UI lub anulować w podstawowe. To pytanie może wyglądać głupio dla ciebie. Ale w rzeczywistości pomieszałem z szablonem używanym przez Blueimp w Basic plus UI lub jQuery UI do listy wysyłania i pobierania pliku z przyciskiem start, delete i cancel.

EDYCJA 1 tutaj: Nawet nie mogę użyć tego szablonu, ponieważ pracuję w szablonie gałązki, który ma podobną składnię, która daje błąd, jeśli używam.

Potrzebuję kodu, aby usunąć plik z kolejki i zapobiec przesyłaniu przed rozpoczęciem przesyłania.

Szukałem _cancelHandler jest w jquery.fileupload-ui.js, ale istnieje wiele funkcji, które powodują mnie mylić.

Proszę o pomoc.

Nawet czytałem podstawowe użycie wtyczki w dokumentacji (minimalna instrukcja instalacji), ale nie ma danych, które mają przycisk anulowania.

EDYCJA 2 tutaj: Chyba zapomniałem powiedzieć, że potrzebuję tylko jednego przycisku wysyłania, który prześle wszystkie pliki, które są w kolejce. jeśli jakikolwiek plik na liście został anulowany, to nie powinien on być wysyłany.

tutaj jest mój kod

$(function() { 

    var cancel_btn = $('<button/>') 
    .addClass('btn btn-warning cancel pull-right') 
    .html('<i class="icon-ban-circle icon-white"></i><span> Cancel') 
    .on('click', function() { 
    var $this = $(this), 
     data = $this.data(); 
     $(this).parents('tr').remove(); 

     alert("code to remove from the queue and to prevent upload before upload start"); 
    }); 

    var delete_btn = $('<button/>') 
    .addClass('btn btn-danger cancel pull-right') 
    .html('<i class="icon-ban-circle icon-white"></i><span> Delete') 
    .on('click', function() { 
     alert('code needed to delete file'); 
    });  

    $('#fileupload').fileupload({ 
     dataType: 'json', 
     autoUpload: false, 
     add: function (e, data) { 

      console.log(data); 
      // data.context = $('<div/>').appendTo('#files'); 
      $.each(data.files, function (index, file) { 

       var tr = document.createElement('tr'); 
       var td1 = document.createElement('td'); 
       var td2 = document.createElement('td'); 
       var td3 = document.createElement('td'); 
       $(td1).append(file.name); 
       $(td2).append(file.size); 
       $(td3).append(cancel_btn.clone(true).data(data)); 
       $(tr).append(td1,td2,td3); 
       $('#files_list tbody').append(tr); 

       var size = $('#files_list tbody tr').size(); 
       if(size < 1) 
        $('#files_list').addClass('hide'); 
       else 
        $('#files_list').removeClass('hide'); 
      }); 

      $('#submit').click(function(){ 
       //data.context = $('<p/>').text('Uploading...').replaceAll($(this)); 
       data.submit(); 
       $('#files_list tbody').html(''); 
      }); 
     }, 
     done: function (e, data) { 

      $.each(data.result.files, function (index, file) { 
       var tr = document.createElement('tr'); 
       var td1 = document.createElement('td'); 
       var td2 = document.createElement('td'); 
       var td3 = document.createElement('td'); 
       $(td1).append(file.name); 
       $(td2).append(file.size); 
       $(td3).append(delete_btn.clone(true).data(data)); 
       $(tr).append(td1,td2,td3); 
       $('#files_list tbody').append(tr); 
      }); 
     }, 
     fail: function (e, data) { 
      //console.log(data.result); 
      $.each(data.result.files, function (index, file) { 
       var error = $('<span/>').text(file.error); 
       $(data.context.children()[index]) 
        .append('<br>') 
        .append(error); 
      }); 
     }, 
     progressall: function (e, data) { 
      var progress = parseInt(data.loaded/data.total * 100, 10); 
      $('#progress .bar').css(
       'width', 
       progress + '%' 
      ); 
     }   
    }); 
}); 

Answer 1

Można dodać „upload” i „anuluj” przycisk do każdego pliku i wiązało funkcji przedstawić na tych przycisków.

var cancel_btn = $('<button/>') 
    .addClass('btn btn-warning cancel pull-right') 
    .html('<i class="icon-ban-circle icon-white"></i><span> Cancel') 
var upload_btn = $('<button/>') 
    .addClass('btn btn-warning upload pull-right') 
    .html('<i class="icon-ban-circle icon-white"></i><span> Upload') 
    }); 
$('#submit').on('click',function(){ 
    $('.upload').click() //click upload buttons and upload all files in the queue 
}) 
$('#cancel').on('click',function(){ 
    $('.cancel').click() //click cancel buttons and remove all files in the queue 
}) 
....... 
$('#files_list tbody').append(tr); 
$(td4).append(upload_btn.clone(true).data(data)); 
$('.upload').eq(-1).on('click',function(){//button to upload only this file 
     data.submit(); 
}) 
$('.cancel').eq(-1).on('click',function(){ 
     $(this).parent().parent().remove()//or something like this, 
             //delete the whole <tr> 
             //and remove the file from the queue 
})