折腾大半天,基本算实现了已提交图片信息的编辑,勉强能用。留给新手借鉴。
希望大神能继续完善,还是有点儿小BUG: 读取现有图片后,再新增一张,不要上传,点新增图片的删除, 之前取出的已上传图片也被隐藏了。
视图里的JS,注意放在webuploader的初始化代码之后:
//编辑已上传照片信息
uploader.on('ready', function() {
$statusBar.show(); //显示新增和上传按钮
setState( 'ready' ); //重置上传按钮状态
//载入现有照片
$li = $('{volist name="$tptc.photo" id="vo"}' +
'<li id="{$vo.id}" title ="{$vo.url}">' +
'<p class="imgWrap"><img src="__ROOT__{$vo.url}"></p>' +
'<p class="progress"><span></span></p>' +
'</li>' +
'<input type="hidden" name="photo[\'{$vo.id}\']" value="{$vo.url}">' +
'{/volist}');
//给li添加删除按钮
$btns = $('<div class="file-panel" style="height: 30px;">' +
'<span class="cancel">删除</span>' +
'<b class="ysc">已上传</b></div>').appendTo( $li );
$(".filelist").append( $li );
//点击删除,提交给控制器进行删除操作
$(".cancel ").click(function(){
//定义传给控制器的文件URL和照片ID
var urlValue = '.' + $(this).closest('li').attr('title');
var idValue = $(this).closest('li').attr('id');
//提交到控制器
$.post('{:url("member/delfile")}',{'url':urlValue,'id':idValue},function(data){
if(data.code == 200){
//如删除成功,移除这个li
$("#"+idValue).remove();
alert(data.msg);
}else{
alert(data.msg);
}
});
});
});基于TP5的删除控制器:这里不知为何,unli
//单个删除图片文件,及数据库
public function delfile(){
if(request()->isAjax()){
$url = input('post.url');
$ids = input('post.id');
$result = unlink($url);
if ($result == true) {
db('photo')->where('id',$ids)->delete();
return json(array('code'=>200,'msg'=>'删除成功'));die;
}else
return json(array('code'=>0,'msg'=>'删除失败,请刷新页面'));
}
} 最佳答案