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)头像编辑网页
182821xtxntxx3nvyzyy6p - 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)上传头像照片
183912tlwdaflwubmokaab - Discuz 上传头像修改成非flash版本
头像文件的选择和上传都是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)裁剪头像
184609m6uu6zjl1k61iij8 - Discuz 上传头像修改成非flash版本
图片的缩放和裁剪功能是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)显示头像
184720okyz95bk455q9kqe - Discuz 上传头像修改成非flash版本
三种尺寸的头像的显示也是由flash动画 camera.swf 提供的

 

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

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

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

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

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

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

原文转自:彼岸网

喜欢的话订阅一个呗~第一时间收到文章更新哟~

发表评论

电子邮件地址不会被公开。