discuz的上传头像一直是flash的,无法修改里面的语言包和样式,这里分享下修改成html5的方法:
- 在语言包中增加相关语言:source/language/home/lang_template.php增加
'back_file_selection' => '返回重新选择', 'upload_succeed' => '上传成功!', 'three_avatars' => '以上是您头像的三种尺寸',
- 修改上传的模板:template/default/home/spacecp_avatar.htm
- 修改文件处理脚本
修改文件下载:avatar_160104a
上传头像流程:
现有流程
1)头像编辑网页 |
头像编辑网页是由下面的请求得到的:
GET /home.php?mod=spacecp&ac=avatar 处理请求的脚本文件是 source/include/spacecp/spacecp_avatar.php, 而网页的格式定义在模板文件 template/default/home/spacecp_avatar.htm 里。该网页上包含了一个flash动画 uc_server/images/camera.swf,提供了头像编辑客户端的功能: GET /uc_server/images/camera.swf?inajax=1&appid=1&input=201eHYPCqwF… |
2)上传头像照片 |
头像文件的选择和上传都是flash动画 camera.swf 提供的。它向服务器发送了下面的请求,其中包含了头像文件的内容:
POST /uc_server/index.php?m=user&inajax=1&a=uploadavatar&appid=1&input=201eHYPCqwF… 这个请求是由脚本文件 uc_server/control/user.php里的函数 onuploadavatar 处理的。它在服务器上保存了这个文件,并将该文件的路径发还给flash动画 camera.swf |
3)裁剪头像 |
图片的缩放和裁剪功能是flash动画 camera.swf 提供的。当点击确定按钮后,flash动画向服务器发送了下面的请求:
POST /uc_server/index.php?m=user&inajax=1&a=rectavatar&appid=1&input=201eHYPCqwF… urlReaderTS=1451947309935&avatar1=FFD8FFE000104A4649460001… 请求中含有经裁剪后的大中小三种尺寸的头像。服务器上的脚本文件 uc_server/control/user.php 处理了这个请求,把上传上来的头像保存下来 |
4)显示头像 |
三种尺寸的头像的显示也是由flash动画 camera.swf 提供的 |
新流程
改动后的头像编辑流程变为:
1)头像编辑网页 |
头像编辑网页是由下面的请求得到的:
GET /home.php?mod=spacecp&ac=avatar 处理请求的脚本文件是 source/include/spacecp/spacecp_avatar.php, 而网页的格式定义在模板文件 template/default/home/spacecp_avatar.htm 里。该网页上包含了几个画布,提供了头像编辑客户端的功能: GET /uc_server/images/camera.swf?inajax=1&appid=1&input=201eHYPCqwF… |
2)上传头像照片 |
头像文件的选择和上传都是由html里的file元素提供的提供的。它向服务器发送了下面的请求,其中包含了头像文件的内容:
POST /uc_server/index.php?m=user&inajax=1&a=uploadavatar&appid=1&input=201eHYPCqwF… 这个请求是由脚本文件 uc_server/control/user.php里的函数 onuploadavatar 处理的。它在服务器上保存了这个文件,并将该文件的路径发还给客户端 |
3)裁剪头像 |
图片的缩放和裁剪功能是由画布和jQuery UI里的拖拉和缩放部件共同完成的提供的。当点击确定按钮后,客户端向服务器发送了下面的请求:
POST /uc_server/index.php?m=user&inajax=1&a=rectavatar&appid=1&input=201eHYPCqwF… ——WebKitFormBoundary7I7NlBxh4ycJkBD8 Content-Disposition: form-data; name=”avatar1″ /9j/4AAQSkZJRgABAQAAAQABAAD… 请求中含有经裁剪后的大中小三种尺寸的头像。服务器上的脚本文件 uc_server/control/user.php 处理了这个请求,把上传上来的头像保存下来 |
4)显示头像 |
三种尺寸的头像的显示也是由画布提供的 |
原文转自:彼岸网