事情是这样的,
我想要在Basic中类似于 Basic plus UI 或 jQuery UI 的取消按钮。这个问题对你来说可能看起来很傻。但实际上我从模板中混淆了 blueimp 在 Basic plus UI 或 jQuery UI 中使用的模板来列出上传和下载的文件以及开始、删除和取消按钮。
在这里编辑 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, 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 + '%'
);
}
});
});