系统城装机大师 - 固镇县祥瑞电脑科技销售部宣传站!

当前位置:首页 > 网络编程 > PHP编程 > 详细页面

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

时间:2020-02-13来源:系统城作者:电脑系统城

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

2019-07-04更新

更新修改原因:

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

效果:

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

HTML

  • 代码:

 
  1. <div class="form-group">
  2. <label for="username" class="col-sm-2 control-label no-padding-right">缩略图 </label>
  3. <div class="col-sm-6">
  4. <input type="hidden" id="pic" value="" name="pic">
  5. <!-- 要将父布局的position设置为relative,父布局将无法包裹input -->
  6. <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-palegreen" style="position: relative;margin-right: 10px;" id="xian">
  7. <!--设置input的position为absolute,使其不按文档流排版,并设置其包裹整个布局 -->
  8. <!-- 设置opactity为0,使input变透明 -->
  9. <input type="file" name="pic" accept="image/*" style="opacity: 0;position: absolute">上传图片</a>
  10. <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="btn btn-magenta" onclick="delimg(this)" style="display: none" id="che">撤销图片</a>
  11. </div>
  12. </div>

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

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

JS

  • 代码:

 
  1. //上传图片
  2. //对input[type=file]监听
  3. $("input[name=pic]").on('change',function () {
  4. var e=$(this);
  5. var file=e[0].files[0];
  6. var formData=new FormData();
  7. formData.append("pic",file);//这里给图片赋的name要与下面php中接收的post值对应
  8. $.ajax({
  9. url: "{:url('upimg')}",
  10. type:'POST',
  11. cache: false, //上传文件不需要缓存
  12. data:formData,
  13. processData: false, // 告诉jQuery不要去处理发送的数据(规定通过请求发送的数据是否转换为查询字符串。默认是 true。)
  14. contentType: false, // 告诉jQuery不要去设置Content-Type请求头(发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。)
  15. success:function (data) {
  16. if (data){
  17. $("#xian").hide();
  18. $("#che").show();
  19. $("#pic").val(data);
  20. e.parents(".col-sm-6").append("[外链图片转存失败(img-wg119lWd-1562224226091)(https://mp.csdn.net/mdeditor/%22+data+%22)]");
  21. layer.msg('上传成功', {icon: 6})
  22. } else{
  23. layer.msg('上传失败', {icon: 5})
  24. }
  25. }
  26. })
  27. })
  28.  
  29. //删除图片
  30. function delimg(e) {
  31. layer.confirm('确定删除?', {icon: 3, title:'提示'}, function(index){
  32. //do something
  33. var id="{$article.id}";
  34. var imgpath = $(e).siblings('img:last').attr('src');
  35. $.ajax({
  36. url:"{:url('delimg')}",
  37. type:'post',
  38. data: {pic:imgpath},
  39. success:function (data) {
  40. if(data){
  41. $("#xian").show();
  42. $("#che").hide();
  43. $("#pic").val("");
  44. $(e).siblings('img').hide();
  45. layer.msg('删除成功', {icon: 6})
  46. }else{
  47. layer.msg('删除失败', {icon: 5})
  48. }
  49. }
  50. })
  51. layer.close(index);
  52. });
  53.  
  54. }

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

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

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

PHP

  • 代码:

 
  1. //ajax上传图片
  2. public function upimg()
  3. {
  4. $file = request()->file('pic');//这里接收到的图片name要与上面js中formData赋值对应
  5. if ($file) {
  6. $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'articleimg');
  7. $imgpath = '/uploads/articleimg/' . $info->getSaveName();
  8. return $imgpath;
  9. }else{
  10. return 0;
  11. }
  12. }
  13.  
  14. //ajax删除图片
  15. public function delimg()
  16. {
  17. $data = input('post.');
  18. if ($pic = $data['pic']) {
  19. $imppath = ROOT_PATH . 'public' . $pic;
  20. if (@unlink($imppath)) {
  21. //这里要对数据库中的Pic字段进行即时修改。嗯嗯
  22. $re=db('article')->where('id', $data['id'])->setField('pic', '');
  23. if ($re!==false){
  24. return 1;
  25. }
  26. } else {
  27. return 0;
  28. }
  29. } else {
  30. return '参数错误';
  31. }
  32. }

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


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

 
  1. <div class="form-group">
  2. <label for="username"
  3. class="col-sm-2 control-label no-padding-right">栏目图片</label>
  4. <div class="col-sm-6">
  5. <input type="hidden" name="pic" value="{$ca.pic}" id="pic">
  6. <input type="file" id="file" accept="image/*"
  7. name="pic" style="display: inline-block">
  8. <a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow"
  9. class="btn btn-warning shiny" id="returnimg"><i
  10. class="menu-icon fa fa-repeat"></i>撤销图片</a>
  11. {notempty name='$ca.pic'} <img src="{$ca.pic}" alt="图片"
  12. id="img"
  13. style="width: 50px;margin-top:10px;display: block">
  14. {else/}
  15. <img src="" alt="图片" id="img"
  16. style="width: 50px;margin-top:10px;display: none">
  17. {/notempty}
  18. </div>
  19. </div>

js代码


 
  1. <script>
  2. //图片撤销
  3. $("#returnimg").on('click', function () {
  4. let img = $("#img").attr('src');
  5. if (img) {
  6. layer.confirm('确定撤销图片?', {icon: 3, title: '提示'}, function (index) {
  7. $("#pic").val("");
  8.  
  9. $("#img").attr('src', '').css('display', 'none');
  10.  
  11. layer.close(index);
  12. });
  13.  
  14. } else {
  15. layer.msg('未选择图片', {icon: 0});
  16. }
  17.  
  18. })
  19. </script>

php代码


 
  1. //1.如果栏目原来有图片&&现在撤销了,就删除旧图片
  2. if (($cate['pic'] != false) && ($data['pic'] == false)) {
  3. @unlink(ROOT_PATH . 'public' . $cate['pic']);
  4. }
  5.  
  6. //如果上传了新的图片
  7. $file = request()->file('pic');
  8. // 移动到框架应用根目录/public/uploads/ 目录下
  9. if ($file) {
  10. $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads' . DS . 'cateimg');
  11. if ($info) {
  12. // 成功上传后 获取上传信息
  13. $pic = '/uploads/cateimg/' . $info->getSaveName();
  14. $data['pic'] = $pic;
  15. //2.新的图片上传成功后,如果栏目原来有图片,删除原来栏目图片
  16. if ($cate['pic']) {
  17. @unlink(ROOT_PATH . 'public' . $cate['pic']);
  18. }
  19. } else {
  20. // 上传失败获取错误信息
  21. $this->error($file->getError());
  22. }
  23. }

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

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

分享到:

相关信息

系统教程栏目

栏目热门教程

人气教程排行

站长推荐

热门系统下载