thinkPHP利用ajax异步上传图片并显示、删除的示例


Posted in PHP onSeptember 26, 2018

近来学习tp5的过程中,项目中有个发帖功能,选择主题图片。如下:

thinkPHP利用ajax异步上传图片并显示、删除的示例

利用原始的文件上传处理,虽然通过原始js语句能实时显示上传图片,但是这样的话会涉及很多兼容问题。使用ajax技术,实现选择性删除所选图片功能,并不会有兼容问题。

表单文件form:

<form method="post" enctype="multipart/form-data">
<div style="margin: 20px 20px 20px 10px;">
  主题图片:
  <span id="img-list-box" style="margin-left: 25px;"></span>
  <span style="display:inline-block;height: 30px;position: relative;top:0px;left:0px;">
    <a style="display: inline-block;width: 100px;height:30px;line-height: 30px;text-align:center;background: #F60;color: #FFF;">图片上传</a>
    <input type="file" name="img_src" style="width: 100px;border: 1px solid red;position: absolute;top:0px;left: 0px;height: 30px;opacity: 0;" id="up-img-file" onchange="upimg(this)">
   </span>
</div>
</form>

需要发送Ajax请求的话,当然表单是不能实现我们的需求的,因此,我们需要给表单关联一个单击事件去帮我们进行Ajax请求并选择图片。

当我们点击上传图片这个button按钮时触发选择图片实现Ajax上传

JavaScript代码:

<script type="text/javascript" src="__STATIC__/home/js/jquery.min.js"></script>
<script type="text/javascript">
  function upimg(obj)
  {
    if( obj.value == "" ) {
      return;
    }
    var formdata = new FormData();
    //<input type="file" name="img" value="" />
    formdata.append("img" , $(obj)[0].files[0]);//获取文件法二
    $.ajax({
      type : 'post',
      url : '/home/note/upimg', //接口
      data : formdata,
      cache : false,
      processData : false, // 不处理发送的数据,因为data值是Formdata对象,不需要对数据做处理
      contentType : false, // 不设置Content-type请求头
      success : function(response){
        console.log(response);
        var html = '<div style="position: relative;margin-right: 20px;margin-bottom: 15px;width: 132px;display: inline-block;border: 1px solid #CCC;background:#EEE;">'
            +'<span style="display: block;width: 120px;height: 80px;border: 1px solid #F2F1F0;margin: 5px;overflow: hidden;">'
            +'<img src="'+response+'" style="width: 100%;" />'
            +'</span>'
            +'<input type="hidden" name="imgs[]" value="'+response+'" />'
            +'<a onclick="delImg(this);" style="z-index: 10;display: block;top: -8px;cursor:pointer;right: -8px;position:absolute;width: 20px;height: 20px;background: #CCC;border-radius:100%;text-align:center;line-height: 20px;border: 1px solid #C1C1C1;color: #555;">X</a>'
            +'</div>';

        $('#img-list-box').append(html);
      },
      error : function(){ }
    });
  }

  function delImg(obj)
  {
    $(obj).parent('div').remove();
  }
</script>

点击选择图片之后就是交给服务器端处理了。

php接口文件:

public function upimg()
  {
    //验证
    $file = request()->file('img');
    // 移动到框架应用根目录/public/uploads/ 目录下
    if($file){
      $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');
      if($info){
        // 成功上传后 获取上传信息
        $img_src = '/uploads/'.$info->getSaveName();
        echo $img_src; //返回ajax请求
      }else{
        // 上传失败获取错误信息
        $this->error($file->getError());
      }
    }
  }

改善后的效果图:

thinkPHP利用ajax异步上传图片并显示、删除的示例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

PHP 相关文章推荐
聊天室php&amp;mysql(一)
Oct 09 PHP
基于mysql的论坛(7)
Oct 09 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
Oct 22 PHP
php页面消耗内存过大的处理办法
Mar 18 PHP
PHP 登录记住密码实现思路
May 07 PHP
php错误级别的设置方法
Jun 17 PHP
利用curl抓取远程页面内容的示例代码
Jul 23 PHP
PHP实现变色验证码实例
Jan 06 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
Jun 03 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
May 20 PHP
ThinkPHP5.0 图片上传生成缩略图实例代码说明
Jun 20 PHP
PHP内存溢出优化代码详解
Feb 26 PHP
多个Laravel项目如何共用migrations详解
Sep 25 #PHP
php中上传文件的的解决方案
Sep 25 #PHP
PHP调用微博接口实现微博登录的方法示例
Sep 22 #PHP
PHP如何搭建百度Ueditor富文本编辑器
Sep 21 #PHP
详解php协程知识点
Sep 21 #PHP
在php的yii2框架中整合hbase库的方法
Sep 20 #PHP
php实现在线考试系统【附源码】
Sep 18 #PHP
You might like
解析php开发中的中文编码问题
2013/08/08 PHP
PHP多态代码实例
2015/06/26 PHP
PHP的Yii框架的常用日志操作总结
2015/12/08 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
jQuery UI Autocomplete 1.8.16 中文输入修正代码
2012/04/16 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
jquery实现可旋转可拖拽的文字效果代码
2016/01/27 Javascript
DeviceOne 让你一见钟情的App快速开发平台
2016/02/17 Javascript
js实现select二级联动下拉菜单
2020/04/17 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
利用jQuery的动画函数animate实现豌豆发射效果
2016/08/28 Javascript
基于javascript实现按圆形排列DIV元素(一)
2016/12/02 Javascript
JavaScript模板引擎Template.js使用详解
2016/12/15 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
bing Map 在vue项目中的使用详解
2018/04/09 Javascript
[03:57]2016完美“圣”典风云人物:rOtk专访
2016/12/09 DOTA
Python文件夹与文件的相关操作(推荐)
2016/07/25 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
TensorFlow卷积神经网络之使用训练好的模型识别猫狗图片
2019/03/14 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
python 读取修改pcap包的例子
2019/07/23 Python
python找出列表中大于某个阈值的数据段示例
2019/11/24 Python
python实现大战外星人小游戏实例代码
2019/12/26 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
维修工先进事迹
2014/05/29 职场文书
支部书记四风对照材料
2014/08/28 职场文书
国庆阅兵观后感
2015/06/15 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
2016年植树节红领巾广播稿
2015/12/17 职场文书
Java Shutdown Hook场景使用及源码分析
2021/06/15 Java/Android
Python中递归以及递归遍历目录详解
2021/10/24 Python
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
Python中使用Opencv开发停车位计数器功能
2022/04/04 Python