目前,ThinkPHP官网的上传头像涉及到 图片上传 以及 图片裁剪

1,图片上传

在html里使用的是 jquery.uploadify.js插件,可以实时显示上传的进度条,并且无刷新显示,用户体验很好(当然,你也可以什么插件都不用,那样就得进行页面跳转了)。

在php里使用官方的 uploadFile.class.php类库,不过改写了下。因为头像的命名最好用同一个名字和后缀,便于读取。

上传到服务器后,就将图片地址用ajax返回给页面,进行接下来的裁剪。

2,图片裁剪

在html里获取到了上传后的图片,显示在页面上。然后就用到JS裁剪插件 jquery.Jcrop.js。裁剪的具体方法可以查看源码。

裁剪的最终目的是获取裁剪区域相对于图片的四个角的坐标,然后再传给php端进行裁剪,插件所做的也就是获取坐标并实时显示效果。

为什么要裁剪两次呢?因为在js端裁剪是为了实时的显示图片效果,而在php端才是真正的保存裁剪后的图片。

页面里的效果:

真正保存后效果:

在php端获取到裁剪区域的坐标后,就可以对原图进行裁剪了。这里用到了 ThinkImage类库。
详细过程请看源码,无非就是通过GD库对图片进行的一系列处理而已( 注意:GD库对gif图片的裁剪效果不好,大家可以用Imagick库)。

相信大家看了上面的介绍,对头像上传这一块流程和原理有了大概的了解。大家可以在例子的基础上进行扩展,如保存进数据库,以符合业务需要。

源码下载: http://www.thinkphp.cn/code/222.html

转载原文出处: http://www.thinkphp.cn/document/331.html

ThinkPHP官网头像上传原理相关推荐

  1. 容器单机编排工具 Docker Compose,swap 限制,配置默认的CFS调度程序,Stress-ng 压力测试工具,docker官网镜像上传,及阿里云镜像上传,Docker 的资源限制

    目录 Docker Compose介绍   有版本问题 一键生成 docker-compose.yml docker官网镜像上传,及阿里云镜像上传 Docker 之分布式仓库 Harbor Docke ...

  2. ThinkPHP自动化为已经上传的图片添加「 响应式」水印(数据库字段部分)

    版权属于: Postbird - There I am , in the world more exciting! 原文地址: http://www.ptbird.cn/thinkphp-image- ...

  3. 补习系列(11)-springboot 文件上传原理

    一.文件上传原理 一个文件上传的过程如下图所示: 浏览器发起HTTP POST请求,指定请求头: Content-Type: multipart/form-data 服务端解析请求内容,执行文件保存处 ...

  4. php怎么上传函数,PHP单文件上传原理及上传函数的封装操作示例

    搜索热词 @H_404_0@本文实例讲述了PHP单文件上传原理及上传函数的封装操作.分享给大家供大家参考,具体如下: @H_404_0@表单: @H_404_0@0.PHP: 无标题文档 请选择您要上 ...

  5. php 打包上传的文件,PHP单文件上传原理及上传函数的打包

    PHP单文件上传原理及上传函数的封装 服务器(临时文件)-->指定目录,当文件进入服务器时它就是临时文件了,这时操作中要用临时文件的名称tmp_name.//在客户端设置上传文件的限制(文件类型 ...

  6. php+jquery实现图片上传预览_和拖动位置值,PHP教程:thinkphp jquery实现图片上传和预览效果...

    <PHP教程:thinkphp jquery实现图片上传和预览效果>要点: 本文介绍了PHP教程:thinkphp jquery实现图片上传和预览效果,希望对您有用.如果有疑问,可以联系我 ...

  7. 如何屏蔽迅雷偷偷上传及上传原理

    解决办法: 方法1,迅雷所有的下载数据都存储在"C:\Windows\system32\cid_store.dat"文件中,每次下载完成之后只要删除该文件就可以让迅雷找不到下载资源 ...

  8. thinkphp 调用php文件上传,ThinkPHP实现带验证码的文件上传功能实例

    本文实例讲述了ThinkPHP实现带验证码的文件上传功能.分享给大家供大家参考.具体实现方法如下: ThinkPHP上传文件非常的简单我们只要调用一个文件上传类UploadFile就可以快速的实现上传 ...

  9. 实例讲解ThinkPHP的UploadFile文件上传类的详细用法

    ThinkPHP文件上传自带了上传类,使用起来非常方便,我们将以一个文件上传实例来讲解ThinkPHP上传类的实际用法,上传类使用时有详细的中文注释,可以非常方便的告诉你类的一些方法或变量的使用方法. ...

最新文章

  1. 卡尔曼滤波 -- 从推导到应用(一) 转有关键思想 K增益是最小 贺一佳博士
  2. 谷歌新研究对神经网络数据并行性提出质疑
  3. (十)mybatis之配置(mybatis-config.xml)
  4. ASP中利用OWC控件实现图表功能详解[zz]
  5. Linux ln指令
  6. Performance Metrics(性能指标1)
  7. JasperReports JSF插件用例–简单列表报告
  8. 几个简单的正则小例子
  9. android7.0提示定位,解决android7.0上某些PopuWindow显示位置不正确的问题
  10. Cinder - 读取glusterfs_shares_config代码
  11. Atitit.prototype-base class-based  基于“类” vs 基于“原型”
  12. acrobat dc mac版_Adobe Acrobat Pro DC mac版-Adobe Acrobat Pro DC for Macv2019.021.20048 免费版__西西软件下载...
  13. HTTP报文格式详解
  14. 数学分析教程(科大)——1-(1~10)小节
  15. Spring boot项目启动报无法加载主类
  16. 如何查看手机上已连接 WIFI 的密码
  17. 兼容性和浏览器hack
  18. leetcode-第13题 罗马数字转整数
  19. Allegro PCB Design GXL (legacy) - 新建绘图(PCB),设置单位、坐标、栅格间距等参数
  20. 常见的邮箱的pop和imap以及smtp地址整理

热门文章

  1. 编程菜鸟看云计算、移动互联网和物联网
  2. 小牛客户管理软件 下载
  3. 解决80端口占用问题后无法使用打印机问题解决
  4. LOL英雄联盟赏金术士老鼠教学视频
  5. 关于零基础学员参加达梦DCA认证考试的一点心得
  6. 论文笔记26 -- (视频压缩)【CVPR2020】M-LVC: Multiple Frames Prediction for Learned Video Compression
  7. 10月ins点赞Top 10: Kylie霸榜再次袭来~,Selena发新单暗指比伯,海狸反击
  8. WebService接口登录验证代码生成调用
  9. 图形对平面设计艺术的重要影响
  10. 蓝桥-BASIC-11 十六进制转十进制