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 相关文章推荐
第1次亲密接触PHP5(1)
Oct 09 PHP
怎样在PHP中通过ADO调用Asscess数据库和COM程序
Oct 09 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
Oct 29 PHP
使用phpQuery采集网页的方法
Nov 13 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
Apr 10 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
Oct 30 PHP
PHP中创建图像并绘制文字的例子
Nov 19 PHP
PHP IDE PHPStorm配置支持友好Laravel代码提示方法
May 12 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
Sep 29 PHP
PHP中array_keys和array_unique函数源码的分析
Feb 26 PHP
简单谈谈PHP面向对象之标识对象
Jun 27 PHP
PHP 计算两个时间段之间交集的天数示例
Oct 24 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安装攻略:常见问题解答(一)
2006/10/09 PHP
php类中private属性继承问题分析
2012/11/01 PHP
PHP漏洞全解(详细介绍)
2012/11/13 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PhpDocumentor 2安装以及生成API文档的方法
2014/05/21 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
PHP获取中国时间(上海时区时间)及美国时间的方法
2017/02/23 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
一个可以增加和删除行的table并可编辑表格中内容
2014/06/16 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
C#实现将一个字符转换为整数
2017/12/12 Javascript
vue-cli配置环境变量的方法
2018/07/09 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
[03:01]2014DOTA2国际邀请赛 DC:我是核弹粉,为Burning和国土祝福
2014/07/13 DOTA
Python MySQL数据库连接池组件pymysqlpool详解
2017/07/07 Python
python实现简单名片管理系统
2018/11/30 Python
Python 类方法和实例方法(@classmethod),静态方法(@staticmethod)原理与用法分析
2019/09/20 Python
Python性能分析工具Profile使用实例
2019/11/19 Python
浅析Python的命名空间与作用域
2020/11/25 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
详解HTML5 window.postMessage与跨域
2017/05/11 HTML / CSS
详解window.open被浏览器拦截的解决方案
2019/07/18 HTML / CSS
欧洲有机婴儿食品最大的市场:Organic Baby Food(供美国和加拿大)
2018/03/28 全球购物
牦牛毛户外探险服装:Kora
2019/02/08 全球购物
什么是网络协议
2016/04/07 面试题
成人大专生实习期的自我评价
2013/10/02 职场文书
制衣厂各岗位职责
2013/12/02 职场文书
先进个人事迹材料
2014/01/25 职场文书
十佳美德少年事迹材料
2014/02/05 职场文书
2014年教研组工作总结
2014/11/26 职场文书
小学公民道德宣传日活动总结
2015/03/23 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
《全神贯注》教学反思
2016/02/22 职场文书
教你用Python爬取英雄联盟皮肤原画
2021/06/13 Python