这是事情,
我想要取消按钮类似于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.total * 100,10);
$('#progress .bar').css(
'width',progress + '%'
);
}
});
});
解决方法
您可以为每个文件添加“上传”和“取消”按钮,并将提交功能绑定在这些按钮上.
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
})
