我正在敲打我的头，试图删除使用Plupload添加的图像/文件。我可以添加多个图像，但不能从队列中删除。
注意我可以从队列中删除最后一个图像，但如果有超过1个图像/文件，我不能删除超过1个图像/文件。下面是我用来上传和操作文件的plupload代码。
var uploader = new plupload.Uploader({
runtimes : 'html5,flash,silverlight,html4',
browse_button : 'pickfiles', // you can pass an id...
container: document.getElementById('attachment_container'), // ... or DOM Element itself
url : site_url+"ajax/do_upload",
multiple_queues : true,
flash_swf_url : asset_url + 'scripts/Moxie.swf',
silverlight_xap_url : asset_url + 'scripts/Moxie.xap',
filters : {
max_file_size : '10mb',
mime_types: [
{title : "Image files", extensions : "jpg,gif,png,xls,pdf,doc,docx"},
{title : "Zip files", extensions : "zip"}
]
},
//
init: {
PostInit: function() {
// document.getElementById('file_list').innerHTML = '';
document.getElementById('uploadfiles').onclick = function() {
uploader.start();
return false;
};
},
FilesAdded: function(up, files) {
var deleteHandle = function(uploaderObject, fileObject) {
// document.getElementById("uploadfiles").show();$()
return function(event) {
event.preventDefault();
uploaderObject.removeFile(fileObject);
// $(this).closest("div#" + fileObject.id).remove();
$(this).parent().attr('id', fileObject.id).remove();
};
};
plupload.each(files, function(file) {
document.getElementById('file_list').innerHTML += '<div id="' + file.id + '"><input type="hidden" name="files[]" value="'+file.name+'"><input type="hidden" name="file_id[]" value="'+file.id+'">' + file.name + ' (' + plupload.formatSize(file.size) + ')<a href="javascript:void(0)" id="deleteFile' + file.id + '">Remove</a> <b></b></div>';
$('#deleteFile' + file.id).click(deleteHandle(up, file));
});
up.refresh();
},
UploadProgress: function(up, file) {
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
},
// QueueChanged: function(up, files) {
// plupload.each(files, function(file) {
// document.getElementById('file_list').innerHTML += '<div id="' + file.id + '"><input type="hidden" name="files[]" value="'+file.name+'"><input type="hidden" name="file_id[]" value="'+file.id+'">' + file.name + ' (' + plupload.formatSize(file.size) + ')<a href="javascript:void(0)" id="deleteFile' + file.id + '">Remove</a> <b></b></div>';
// $('#deleteFile' + file.id).click(deleteHandle(up, file));
// });
// up.refresh();
// },
Error: function(up, err) {
document.getElementById('console').appendChild(document.createTextNode("'nError #" + err.code + ": " + err.message));
}
}
});
uploader.init();
所以没有人帮助我，我自己弄清楚了，我仍然不完全了解Plupload。以下是我从队列中删除图像的解决方案，希望它可以帮助任何其他寻找相同问题的人。
我粘贴在我的问题中的代码是相同的，只是FilesAdded事件是我改变一些逻辑的地方，它开始工作，所以我只粘贴文件添加事件的代码
FilesAdded: function(up, files) {
up.start();
$.each(files, function(i, file) {
$('#file_list').append(
'<div style="padding:1px;" id="' + file.id + '"><a href="javascript:" id="'+file.name+'" class="download_attachment"> ' +
file.name + '</a> (' + plupload.formatSize(file.size) + ') <b></b>' +
'<a style="float:right;" href="" class="remove fa fa-remove fa-red"></a></div>'
);
$('#uploadfiles').css('display', 'initial');
$('#file_list').append('<br/>');
// callback when clicking on remove icon added after files uploaded
$('#' + file.id + ' a.remove').first().click(function(e) {
e.preventDefault();
up.removeFile(file);
$('#' + file.id).next("br").remove();
$('#' + file.id).remove();
if (up.files.length == 0) {
$('#uploadfiles').css('display', 'none');
}
});
// Download uploaded attachment
$('#' + file.id + ' a.download_attachment').first().click(function(e) {
e.preventDefault();
var name = $(this).attr('id');
window.location=site_url + 'reporting/download_attachment/' + name;
});
});