如何在blueimp Basic中开始上载之前从队列中删除文件以停止上载? [英] How to remove file from the queue to stop upload before upload starts in blueimp Basic?

问题描述

这是东西，

我想要类似于 Basic 中的Basic plus UI或jQuery UI的取消按钮.这个问题对您来说可能看起来很愚蠢.但是实际上我从模板中混淆了blueimp在Basic plus UI或jQuery UI中使用开始，删除和取消按钮列出上传和下载文件的方式.

I want cancel button similar to Basic plus UI or jQuery UI in Basic. This question might look silly to you. But actually i got confuse from template which blueimp are using in Basic plus UI or jQuery UI to list upload and downloaded file with start, delete and cancel button.

在此处即使是我也不能使用该模板，因为我正在使用树枝模板，该模板具有类似的语法，如果使用该模板则会出错.

EDIT 1 here: Even i can't use that template because i am working in twig template, which has similar syntax which give error if i use.

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

I need code to remove file from the queue and to prevent upload before upload start.

我搜索了_cancelHandler在jquery.fileupload-ui.js中，但是有很多功能使我感到困惑.

I searched that _cancelHandler is in jquery.fileupload-ui.js but there are lots of function which are making me confuse.

请有人帮助.

即使我已经阅读了文档中的插件的基本用法(最低设置指南)，但没有数据具有取消按钮.

Even i read basic use of plugin in documentation (minimal setup guide) but there is not data to have cancel button.

在此处编辑2 :我想我错过了告诉我只需要一个上传按钮的功能，该按钮将上传队列中的所有文件.如果列表中的任何文件被取消，则不应上传.

EDIT 2 here : I think i missed to tell that i need only single upload button which will upload all the files which are in queue. if any file in the list cancelled then that should not upload.

这是我的代码

$(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 + '%'
            );
        }        
    });
});

推荐答案

您可以向每个文件添加上传"和取消"按钮，并将提交功能绑定到这些按钮上.

You can add an "upload" and "cancel" button to every file and bind the submit function on these buttons.

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

这篇关于如何在blueimp Basic中开始上载之前从队列中删除文件以停止上载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！