jquery – 如何删除文件从队列中停止上传,然后上传在blueimp Basic？

我想要取消按钮类似于Basic加UI或jQuery UI在Basic中.这个问题对你来说可能很傻.但实际上,我从基本加UI和jQuery UI中的blueimp使用的模板混淆,列出上载和下载文件与启动,删除和取消按钮.

编辑1在这里：即使我不能使用该模板,因为我正在twig模板,它具有类似的语法,如果我使用错误.

我需要代码从队列中删除文件,并在上传开始之前防止上传.

我搜索了_cancelHandler在jquery.fileupload-ui.js中,但是有很多功能让我很困惑.

请有人帮忙

即使我阅读了文档中的基本使用插件(最少的安装指南),但没有数据有取消按钮.

在这里编辑2：我想我错过了,我只需要单一的上传按钮,这将上传所有在队列中的文件.如果列表中的任何文件被取消,那么不应该上传.

这是我的代码

$(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,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,td3);
                $('#files_list tbody').append(tr);
            });
        },fail: function (e,data) {
            //console.log(data.result);
            $.each(data.result.files,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.@R_544_10586@l * 100,10);
            $('#progress .bar').css(
                'width',progress + '%'
            );
        }        
    });
});