PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解

这篇文章主要介绍了PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作,结合实例形式详细分析了前台ajax提交图片上传、删除、修改以及后台PHP逻辑处理相关操作技巧与注意事项,需要的朋友可以参考下

本文实例讲述了PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作。分享给大家供大家参考,具体如下:

2019-07-04更新

更新修改原因:

  1. 前台界面ui显示不好看
  2. 后台处理逻辑混乱,涉及到多张图片处理起来很麻烦,所以修改成通过ajax上传/删除图片。

效果:

上传前:
在这里插入图片描述
上传后:
在这里插入图片描述
撤销后:
在这里插入图片描述
以下是更新的代码:

HTML

  • 代码:

要点: 重点都在注释里了。

参考:JS+HTML实现自定义上传图片按钮并显示图片

JS

  • 代码:
 //上传图片 //对input[type=file]监听 $("input[name=pic]").on('change',function () { var e=$(this); var file=e[0].files[0]; var formData=new FormData(); 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}) } } }) }) //删除图片 function delimg(e) { layer.confirm('确定删除?', {icon: 3, title:'提示'}, function(index){ //do something var id="{$article.id}"; var imgpath = $(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); }); } 

这里有句代码展示有问题,源码如下:
在这里插入图片描述

要点
JS formDate的使用
上传成功后返回图片路径,塞到input[type=hidden]框里,之后会随着表单提交上去,保存在数据库中。

参考:JavaScript实现图片上传并预览并提交ajax

PHP

  • 代码:
 //ajax上传图片 public function upimg() { $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{ return 0; } } //ajax删除图片 public function delimg() { $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){ return 1; } } else { return 0; } } else { return '参数错误'; } } 

分割线(下面是前几天写的答案,逻辑混乱。。。就不要看了吧)


  1. 前台处理:
  • 添加一个,会随着post一起提交到后台中去。
    在这里插入图片描述
  1. 后台处理分为两步
  • 收到的post数据data中pic字段值为空时,且该栏目之前有图片,则执行删除原来图片操作;
  • 如果上传了新图片,则移动到指定目录下,并查询该栏目之前是否有图片,如果有,则执行删除原来图片操作;
    html代码
 
撤销图片 {notempty name='$ca.pic'} {else/} {/notempty}

js代码

 

php代码

 //1.如果栏目原来有图片&&现在撤销了,就删除旧图片 if (($cate['pic'] != false) && ($data['pic'] == false)) { @unlink(ROOT_PATH . 'public' . $cate['pic']); } //如果上传了新的图片 $file = request()->file('pic'); // 移动到框架应用根目录/public/uploads/ 目录下 if ($file) { $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'cateimg'); if ($info) { // 成功上传后 获取上传信息 $pic = '/uploads/cateimg/' . $info->getSaveName(); $data['pic'] = $pic; //2.新的图片上传成功后,如果栏目原来有图片,删除原来栏目图片 if ($cate['pic']) { @unlink(ROOT_PATH . 'public' . $cate['pic']); } } else { // 上传失败获取错误信息 $this->error($file->getError()); } } 

更多关于PHP相关内容可查看本站专题:《PHP+ajax技巧与应用小结》、《PHP网络编程技巧总结》、《php字符串(string)用法总结》、《php+mysql数据库操作入门教程》及《php常见数据库操作技巧汇总

希望本文所述对大家PHP程序设计有所帮助。

以上就是PHP+ajax实现上传、删除、修改单张图片及后台处理逻辑操作详解的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » PHP编程