PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解
本文实例讲述了PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作。分享给大家供大家参考,具体如下:
2019-07-04更新
更新修改原因:
- 前台界面ui显示不好看
- 后台处理逻辑混乱,涉及到多张图片处理起来很麻烦,所以修改成通过ajax上传/删除图片。
效果:
上传前:
上传后:
撤销后:
以下是更新的代码:
HTML
- 代码:
缩略图 上传图片 撤销图片
要点:重点都在注释里了。
参考:JS+HTML实现自定义上传图片按钮并显示图片
JS
- 代码:
//上传图片 //对input[type=file]监听 $("input[name=pic]").on('change',function(){ vare=$(this); varfile=e[0].files[0]; varformData=newFormData(); formData.append("pic",file);//这里给图片赋的name要与下面php中接收的post值对应 $.ajax({ url:"{:url('upimg')}", type:'POST', cache:false,//上传文件不需要缓存 data:formData, processData:false,//告诉jQuery不要去处理发送的数据(规定通过请求发送的数据是否转换为查询字符串。默认是true。) contentType:false,//告诉jQuery不要去设置Content-Type请求头(发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。) success:function(data){ if(data){ $("#xian").hide(); $("#che").show(); $("#pic").val(data); e.parents(".col-sm-6").append("[外链图片转存失败(img-wg119lWd-1562224226091)(https://mp.csdn.net/mdeditor/%22+data+%22)]"); layer.msg('上传成功',{icon:6}) }else{ layer.msg('上传失败',{icon:5}) } } }) }) //删除图片 functiondelimg(e){ layer.confirm('确定删除?',{icon:3,title:'提示'},function(index){ //dosomething varid="{$article.id}"; varimgpath=$(e).siblings('img:last').attr('src'); $.ajax({ url:"{:url('delimg')}", type:'post', data:{pic:imgpath}, success:function(data){ if(data){ $("#xian").show(); $("#che").hide(); $("#pic").val(""); $(e).siblings('img').hide(); layer.msg('删除成功',{icon:6}) }else{ layer.msg('删除失败',{icon:5}) } } }) layer.close(index); }); }
这里有句代码展示有问题,源码如下:
要点:
JSformDate的使用
上传成功后返回图片路径,塞到input[type=hidden]框里,之后会随着表单提交上去,保存在数据库中。
参考:JavaScript实现图片上传并预览并提交ajax
PHP
- 代码:
//ajax上传图片 publicfunctionupimg() { $file=request()->file('pic');//这里接收到的图片name要与上面js中formData赋值对应 if($file){ $info=$file->move(ROOT_PATH.'public'.DS.'uploads'.DS.'articleimg'); $imgpath='/uploads/articleimg/'.$info->getSaveName(); return$imgpath; }else{ return0; } } //ajax删除图片 publicfunctiondelimg() { $data=input('post.'); if($pic=$data['pic']){ $imppath=ROOT_PATH.'public'.$pic; if(@unlink($imppath)){ //这里要对数据库中的Pic字段进行即时修改。嗯嗯 $re=db('article')->where('id',$data['id'])->setField('pic',''); if($re!==false){ return1; } }else{ return0; } }else{ return'参数错误'; } }
分割线(下面是前几天写的答案,逻辑混乱。。。就不要看了吧)
- 前台处理:
- 添加一个
,会随着post一起提交到后台中去。
- 收到的post数据data中pic字段值为空时,且该栏目之前有图片,则执行删除原来图片操作;
- 如果上传了新图片,则移动到指定目录下,并查询该栏目之前是否有图片,如果有,则执行删除原来图片操作;
html代码
栏目图片 撤销图片 {notemptyname='$ca.pic'} {else/}