如何在blueimp Basic中上传开始之前从队列中删除文件以停止上传？

这是事情，

我希望取消按钮类似于基本加UI或基本的 jQuery UI。 这个问题对你来说可能很傻。 但实际上我从blueimp在Basic plus UI或jQuery UI中使用的模板中混淆了列表上传和下载文件的开始，删除和取消按钮。

在这里编辑1：即使我不能使用该模板，因为我在twig模板中工作，它具有类似的语法，如果我使用会给出错误。

我需要代码从队列中删除文件，并在上传开始之前阻止上传。

我搜索了_cancelHandler在jquery.fileupload-ui.js但是有很多function让我感到困惑。

请有人帮忙。

即使我阅读文档中的插件的基本使用（最小设置指南），但没有数据有取消按钮。

编辑2在这里：我想我错过了告诉我只需要一个上传按钮，它将上传队列中的所有文件。 如果列表中的任何文件已取消，则不应上传。

这是我的代码

$(function () { var cancel_btn = $('') .addClass('btn btn-warning cancel pull-right') .html(' 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 = $('') .addClass('btn btn-danger cancel pull-right') .html(' 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 = $('
').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 = $('
').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 = $('').text(file.error); $(data.context.children()[index]) .append('
') .append(error); }); }, progressall: function (e, data) { var progress = parseInt(data.loaded / data.total * 100, 10); $('#progress .bar').css( 'width', progress + '%' ); } }); }); 

Answer 1

您可以为每个文件添加“上传”和“取消”按钮，并在这些按钮上绑定提交function。

 var cancel_btn = $('') .addClass('btn btn-warning cancel pull-right') .html(' Cancel') var upload_btn = $('') .addClass('btn btn-warning upload pull-right') .html(' 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  //and remove the file from the queue })