Hier ist das Ding,

Ich möchte die Abbrechen-Schaltfläche ähnlich wie in Basic plus UI oder jQuery UIBasic. Diese Frage könnte für Sie albern aussehen. Aber eigentlich habe ich von Vorlage verwirrt, die Blueimp in Basic plus UI oder jQuery UI verwenden, um Upload und Download-Datei mit Start, Löschen und Abbrechen-Button 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 verwende.

Ich benötige Code, um Dateien aus der Warteschlange zu entfernen und das Hochladen vor dem Hochladen zu verhindern.

Ich habe nach _cancelHandler in jquery.fileupload-ui.js gesucht, aber es gibt viele Funktionen, die mich verwirren.

Bitte jemand helfen.

Sogar ich habe die grundlegende Verwendung des Plugins in der Dokumentation gelesen (Anleitung zum minimalen Setup), aber es sind keine Daten vorhanden, für die eine Abbrechen-Schaltfläche erforderlich ist.

EDIT 2 hier: Ich denke, ich habe versäumt zu sagen, dass ich nur einen Upload-Button brauche, der alle Dateien in der Warteschlange hochlädt. Wenn eine Datei in der Liste abgebrochen wird, sollte diese 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 + '%'
            );
        }        
    });
});