Wie lösche ich eine Datei aus der Warteschlange, um den Upload zu stoppen, bevor der Upload in blueip Basic gestartet wird?

Question

ist die Sache,

I-Taste wollen ähnlich wie Basic plus UI oder jQuery UI in Grund abzubrechen. Diese Frage könnte für Sie albern aussehen. Aber eigentlich habe ich verwirrt von Vorlage, die Blueimp in Basic plus UI oder jQuery UI verwenden, um Upload und heruntergeladene Datei mit Start, Löschen und Abbrechen-Schaltfläche aufzulisten.

EDIT 1 hier: Auch ich kann diese Vorlage nicht verwenden, weil ich in Zweig Vorlage arbeite, die ähnliche Syntax hat, die Fehler geben, wenn ich benutze.

Ich brauche Code, um die Datei aus der Warteschlange zu entfernen und den Upload vor dem Upload zu verhindern.

Ich suchte, dass _cancelHandler in jquery.fileupload-ui.js ist, aber es gibt viele Funktion, die mich verwirren lassen.

Bitte jemand helfen.

Auch ich lese grundlegende Verwendung von Plugin in der Dokumentation (minimale Setup-Anleitung), aber es gibt keine Daten zu Abbrechen Schaltfläche.

EDIT 2 hier: Ich glaube, ich habe es versäumt zu sagen, dass ich nur einzelne Upload-Taste, die alle Dateien hochladen wird, die in der Warteschlange sind. Wenn eine Datei in der Liste abgebrochen wurde, sollte sie nicht hochgeladen werden.

hier ist mein Code

$(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

Sie können ein „upload“ hinzufügen und „Abbrechen“, um jede Datei und binden die Funktion auf diesen Tasten vor.

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 
})