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侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
Oct 15 PHP
PHP 缓存实现代码及详细注释
May 16 PHP
PHP中foreach循环中使用引用要注意的地方
Jan 02 PHP
提升PHP性能的21种方法介绍
Jun 25 PHP
PHP根据两点间的经纬度计算距离
Oct 31 PHP
老生常谈php 正则中的i,m,s,x,e分别表示什么
Mar 02 PHP
PHP如何读取由JavaScript设置的Cookie
Mar 22 PHP
PHP策略模式定义与用法示例
Jul 27 PHP
php微信公众号开发之答题连闯三关
Oct 20 PHP
PHP配置ZendOpcache插件加速
Feb 14 PHP
PHP CURL中传递cookie的方法步骤
May 09 PHP
php快速导入大量数据的实例方法
Sep 23 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数组函数
2008/08/18 PHP
php通过asort()给关联数组按照值排序的方法
2015/03/18 PHP
教你php如何实现验证码
2016/01/20 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
JS实现灵巧的下拉导航效果代码
2015/08/25 Javascript
js判断手机号运营商的方法
2015/10/23 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
2016/12/14 Javascript
nodejs基础知识
2017/02/03 NodeJs
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
浅谈Node.js 沙箱环境
2018/05/15 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
JavaScript 实现同时选取多个时间段的方法
2019/10/17 Javascript
[12:51]71泪洒现场!是DOTA2让经典重现
2014/03/24 DOTA
[58:42]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第一局
2016/02/27 DOTA
Python 利用scrapy爬虫通过短短50行代码下载整站短视频
2018/10/29 Python
详解Python字典的操作
2019/03/04 Python
Pytorch实现GoogLeNet的方法
2019/08/18 Python
Python如何在循环内使用list.remove()
2020/06/01 Python
Matplotlib配色之Colormap详解
2021/01/05 Python
python批量提取图片信息并保存的实现
2021/02/05 Python
加拿大鞋子连锁店:Town Shoes
2016/09/26 全球购物
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
实习期自我鉴定
2013/10/11 职场文书
电焊工岗位职责
2014/03/06 职场文书
小学生评语集锦
2014/04/18 职场文书
见习报告的格式
2014/11/04 职场文书
SpringBoot连接MySQL获取数据写后端接口的操作方法
2021/11/02 MySQL
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers