Discuz 上传头像修改成非flash版本

discuz的上传头像一直是flash的,无法修改里面的语言包和样式,这里分享下修改成html5的方法:

  1. 在语言包中增加相关语言:source/language/home/lang_template.php增加
'back_file_selection' => '返回重新选择',

'upload_succeed' => '上传成功!',

'three_avatars' => '以上是您头像的三种尺寸',
  1. 修改上传的模板:template/default/home/spacecp_avatar.htm
  2. 修改文件处理脚本

修改文件下载:avatar_160104a

上传头像流程:

现有流程

1)头像编辑网页
Discuz 上传头像修改成非flash版本插图
头像编辑网页是由下面的请求得到的:

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)上传头像照片
Discuz 上传头像修改成非flash版本插图(1)
头像文件的选择和上传都是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)裁剪头像
Discuz 上传头像修改成非flash版本插图(2)
图片的缩放和裁剪功能是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)显示头像
Discuz 上传头像修改成非flash版本插图(3)
三种尺寸的头像的显示也是由flash动画 camera.swf 提供的

 

新流程
改动后的头像编辑流程变为:

1)头像编辑网页
Discuz 上传头像修改成非flash版本插图(4)
头像编辑网页是由下面的请求得到的:

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)上传头像照片
Discuz 上传头像修改成非flash版本插图(5)
头像文件的选择和上传都是由html里的file元素提供的提供的。它向服务器发送了下面的请求,其中包含了头像文件的内容:

POST /uc_server/index.php?m=user&inajax=1&a=uploadavatar&appid=1&input=201eHYPCqwF…

这个请求是由脚本文件 uc_server/control/user.php里的函数 onuploadavatar 处理的。它在服务器上保存了这个文件,并将该文件的路径发还给客户端

3)裁剪头像
Discuz 上传头像修改成非flash版本插图(6)
图片的缩放和裁剪功能是由画布和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)显示头像
Discuz 上传头像修改成非flash版本插图(7)
三种尺寸的头像的显示也是由画布提供的

原文转自:彼岸网

看完了?留个评分呗?
[1人评了分,平均: 5/5]

本站原创文章皆遵循“署名-非商业性使用-相同方式共享 3.0 (CC BY-NC-SA 3.0)”。转载请保留以下标注:

原文来源:《Discuz 上传头像修改成非flash版本》

发表评论

邮箱地址不会被公开。

返回顶部