我正在使用一个很棒的插件:https://github.com/CreativeDream/jquery.filer
只有上传的文件可以删除，添加的图像文件不能从服务器上删除
files: [{
name: "photo_2016-09-23_21-25-48dfdgr.jpg",
size: 5453,
type: "image/jpg",
file: ".php/uploads/photo_2016-09-23_21-25-48.jpg",
},{
name: "photo_2016-09-23_21-25-48dfdf.jpg",
size: 9503,
type: "image/png",
file: "./php/uploads/photo_2016-09-23_21-25-48.jpg",
}],
remove file and delete在PHP中不起作用
所有的编码$(document).ready(function(){
//Example 2
$("#filer_input2").filer({
limit: null,
maxSize: null,
extensions: null,
changeInput: '<div class="jFiler-input-dragDrop"><div class="jFiler-input-inner"><div class="jFiler-input-icon"><i class="icon-jfi-cloud-up-o"></i></div><div class="jFiler-input-text"><h3>Drag&Drop files here</h3> <span style="display:inline-block; margin: 15px 0">or</span></div><a class="jFiler-input-choose-btn blue">Browse Files</a></div></div>',
showThumbs: true,
theme: "dragdropbox",
templates: {
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>',
item: '<li class="jFiler-item">'
<div class="jFiler-item-container">'
<div class="jFiler-item-inner">'
<div class="jFiler-item-thumb">'
<div class="jFiler-item-status"></div>'
<div class="jFiler-item-thumb-overlay">'
<div class="jFiler-item-info">'
<div style="display:table-cell;vertical-align: middle;">'
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>'
<span class="jFiler-item-others">{{fi-size2}}</span>'
</div>'
</div>'
</div>'
{{fi-image}}'
</div>'
<div class="jFiler-item-assets jFiler-row">'
<ul class="list-inline pull-left">'
<li>{{fi-progressBar}}</li>'
</ul>'
<ul class="list-inline pull-right">'
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>'
</ul>'
</div>'
</div>'
</div>'
</li>',
itemAppend: '<li class="jFiler-item">'
<div class="jFiler-item-container">'
<div class="jFiler-item-inner">'
<div class="jFiler-item-thumb">'
<div class="jFiler-item-status"></div>'
<div class="jFiler-item-thumb-overlay">'
<div class="jFiler-item-info">'
<div style="display:table-cell;vertical-align: middle;">'
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>'
<span class="jFiler-item-others">{{fi-size2}}</span>'
</div>'
</div>'
</div>'
{{fi-image}}'
</div>'
<div class="jFiler-item-assets jFiler-row">'
<ul class="list-inline pull-left">'
<li><span class="jFiler-item-others">{{fi-icon}}</span></li>'
</ul>'
<ul class="list-inline pull-right">'
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>'
</ul>'
</div>'
</div>'
</div>'
</li>',
progressBar: '<div class="bar"></div>',
itemAppendToEnd: false,
canvasImage: true,
removeConfirmation: true,
_selectors: {
list: '.jFiler-items-list',
item: '.jFiler-item',
progressBar: '.bar',
remove: '.jFiler-item-trash-action'
}
},
dragDrop: {
dragEnter: null,
dragLeave: null,
drop: null,
dragContainer: null,
},
uploadFile: {
url: "./php/ajax_upload_file.php",
data: null,
type: 'POST',
enctype: 'multipart/form-data',
synchron: true,
beforeSend: function(){},
success: function(data, itemEl, listEl, boxEl, newInputEl, inputEl, id){
var parent = itemEl.find(".jFiler-jProgressBar").parent(),
new_file_name = JSON.parse(data),
filerKit = inputEl.prop("jFiler");
filerKit.files_list[id].name = new_file_name;
itemEl.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class='"jFiler-item-others text-success'"><i class='"icon-jfi-check-circle'"></i> Success</div>").hide().appendTo(parent).fadeIn("slow");
});
},
error: function(el){
var parent = el.find(".jFiler-jProgressBar").parent();
el.find(".jFiler-jProgressBar").fadeOut("slow", function(){
$("<div class='"jFiler-item-others text-error'"><i class='"icon-jfi-minus-circle'"></i> Error</div>").hide().appendTo(parent).fadeIn("slow");
});
},
statusCode: null,
onProgress: null,
onComplete: null
},
addMore: true,
files: [{
name: "photo_2016-09-23_21-25-48dfdgr.jpg",
size: 5453,
type: "image/jpg",
file: ".php/uploads/photo_2016-09-23_21-25-48.jpg",
},{
name: "photo_2016-09-23_21-25-48dfdf.jpg",
size: 9503,
type: "image/png",
file: "./php/uploads/photo_2016-09-23_21-25-48.jpg",
}],
allowDuplicates: false,
clipBoardPaste: true,
excludeName: null,
beforeRender: null,
afterRender: null,
beforeShow: null,
beforeSelect: null,
onSelect: null,
afterShow: null,
onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){
var filerKit = inputEl.prop("jFiler"),
file_name = filerKit.files_list[id].name;
console.log(file_name);
$.post('./php/ajax_remove_file.php', {file: file_name});
},
onEmpty: null,
options: null,
dialogs: {
alert: function(text) {
return alert(text);
},
confirm: function (text, callback) {
confirm(text) ? callback() : null;
}
},
captions: {
button: "Choose Files",
feedback: "Choose files To Upload",
feedback2: "files were chosen",
drop: "Drop file here to Upload",
removeConfirmation: "Are you sure you want to remove this file?",
errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded.",
filesType: "Only Images are allowed to be uploaded.",
filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB.",
filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
})
请引导我。
你只需要改变
file_name = filerKit.files_list[id].name;
file_name = filerKit.files_list[id].file.name;
中的onRemove name变量在传入现有文件的文件数组时没有设置，但是它存在于创建并传递给onRemove函数的文件对象中。如果它存在，就使用它，如果不存在，就抓住另一个。如果你要修改服务器上保存的文件名它不会在新上传时更新所以使用uploadFile
返回的文件名很重要onRemove: function(itemEl, file, id, listEl, boxEl, newInputEl, inputEl){
var file_name;
var filerKit = inputEl.prop("jFiler");
if (typeof filerKit.files_list[id].name === 'undefined') {
file_name = filerKit.files_list[id].file.name;
}
else {
file_name = filerKit.files_list[id].name;
}
$.post('./php/ajax_remove_file.php', {file: file_name});
},