我正在试图删除使用Plupload
添加的图像/文件。我可以添加多个图像,但无法从队列中删除。
注意我可以从队列中删除最后一张图片,但如果有超过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();
答案 0 :(得分:0)
所以没有人帮助我,我自己想通了,我仍然完全不知道Plupload
。下面是我从队列中删除图像的解决方案,希望它可以帮助任何其他人寻找相同的问题。
我在我的问题中粘贴的代码是相同的,它是juts FilesAdded
事件是我更改了一些逻辑并且它开始工作所以我只会粘贴FilesAdded Event的代码
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;
});
});