UCenter中上传头像功能的剥离
2010-10-15
本文的内容仅供技术交流学习之用,相关的代码并未考虑实际应用系统中所必需的用户身份验证等功能,同时由于 UCenter 发行许可的限制,请勿将本文附带的代码直接用于实际的产品或项目中。
Discuz! 和 UCHome 中的头像上传功能很好用,大概有不少人和我一样想弄清楚它是怎么实现的,甚至希望移植到自己的应用系统中。
这个功能其实是在 UCenter 中实现的(这是 Discuz! 和 UCHome 等其它相关产品都依赖的公共模块),通过一个 Flash 文件(camera.swf),跟服务端的 PHP 程序配合完成的。
UCenter/UCHome 本身是开源的,但那个 camera.swf 并没有提供源代码。我们可以通过对 PHP 程序进行分析研究,进而基本摸清这个功能操作的细节,并最终将其剥离出来,独立于 UCenter 而独立运行。本文内容依据的是 UCenter1.5.0/UCHome2.0 。
首先我们来看一下 UCenter/UCHome 中这个功能是怎么工作的。
■ 基本步骤
0. 浏览器访问 UCHome 中的一个 web 页面,其中包含 camera.swf。为保证 camera.swf 能正常工作,在其相同的路径下需要有 locale.xml 文件。
装载 camera.swf 的 HTML 代码可以由下面的程序生成:
home\uc_client\client.php : uc_avatar()
生成的内容大致如下:
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="447" height="477" id="mycamera" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="scale" value="exactfit" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="movie" value="http://localhost/center/images/camera.swf?inajax=1&appid=1&input=6b49vKhr%2FC4VpMIMCAt07Kr2eQk8jjY%2F6vtvDonod47dU7JK%2BxVFJPIVY%2FJGMQoSpzHylapBa8FbsEWFGorPwZDJRM10wGjxvbHKTVmVgrng%2BpoSTTsk%2BE3U&agent=a523e70c80e13e4eaee37c7f4bde4f2c&ucapi=http%3A%2F%2Flocalhost%2Fcenter&avatartype=virtual" />
<param name="menu" value="false" />
<embed src="http://localhost/center/images/camera.swf?inajax=1&appid=1&input=6b49vKhr%2FC4VpMIMCAt07Kr2eQk8jjY%2F6vtvDonod47dU7JK%2BxVFJPIVY%2FJGMQoSpzHylapBa8FbsEWFGorPwZDJRM10wGjxvbHKTVmVgrng%2BpoSTTsk%2BE3U&agent=a523e70c80e13e4eaee37c7f4bde4f2c&ucapi=http%3A%2F%2Flocalhost%2Fcenter&avatartype=virtual"
quality="high"
bgcolor="#ffffff"
width="447"
height="477"
name="mycamera"
align="middle"
allowScriptAccess="always"
allowFullScreen="false"
scale="exactfit"
wmode="transparent"
type="application/x-shockwave-flash"
pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
参数分解如下:
inajax 1
appid 1
input 6b49vKhr%2FC4VpMIMCAt07Kr2eQk8jjY%2F6vtvDonod47dU7JK%2BxVFJPIVY%2FJGMQoSpzHylapBa8FbsEWFGorPwZDJRM10wGjxvbHKTVmVgrng%2BpoSTTsk%2BE3U
agent a523e70c80e13e4eaee37c7f4bde4f2c
ucapi http://localhost/center
avatartype virtual
其中的关键参数为 ucapi,后面两步 POST 的 URL 为 <ucapi>/index.php
这里的 "/index.php" 似乎是 hardcode 在 camera.swf 里的,不过在最后的程序代码中会看到,如果我们指定的 ucapi 明确给定了一个 php 文件的话,可以绕开 index.php 这个文件名。换句话说,如果服务端不是采用 PHP,而是另外一种编程语言的话(比如 Java/.NET 等),也是可以实现的。
1. 用户在 camera.swf 中“选择图片”后,camera.swf 会立刻把选中的图片上传到服务器。
$_SERVER
REQUEST_URI /center/index.php?m=user&inajax=1&a=uploadavatar&appid=1&input=ca68o1L41a1HkbmhMJVGHu0oFjxYXwadnUT9HnFpnyz5AgiZcsVGecPP38w%2BwM7XtT79zC5WMWlH8T7LvluCSXS3YUsrcJDoD1ySILNO2xo63hmBAvXVX24f&agent=a523e70c80e13e4eaee37c7f4bde4f2c&avatartype=virtual
METHOD POST
$_GET
m user
inajax 1
a uploadavatar
appid 1
input ca68o1L41a1HkbmhMJVGHu0oFjxYXwadnUT9HnFpnyz5AgiZcsVGecPP38w+wM7XtT79zC5WMWlH8T7LvluCSXS3YUsrcJDoD1ySILNO2xo63hmBAvXVX24f
agent a523e70c80e13e4eaee37c7f4bde4f2c
avatartype virtual
$_POST
Filename something.jpg
Upload Submit Query
$_FILES
图片文件内容
处理程序为:
center\control\user.php : onuploadavatar()
程序返回的内容为保存该文件的临时位置,比如:
http://localhost/center/data/tmp/upload5.jpg
camera.swf 会通过上面这个网址来读取图片,显示供操作。还可以有以下返回值作为错误代码:
-1 : Invalid identity!
-2 : Invalid photograph!
-3 : No photograph be upload!
-4 : Can not write to the data/tmp folder!
-5 : Server can not upload!
2. 用户在 camera.swf 中“确定”后,camera.swf 会向服务器上传 3 个图片数据,作为大、中、小尺寸的头像图片。
$_SERVER
REQUEST_URI /center/index.php?m=user&inajax=1&a=rectavatar&appid=1&input=ca68o1L41a1HkbmhMJVGHu0oFjxYXwadnUT9HnFpnyz5AgiZcsVGecPP38w%2BwM7XtT79zC5WMWlH8T7LvluCSXS3YUsrcJDoD1ySILNO2xo63hmBAvXVX24f&agent=a523e70c80e13e4eaee37c7f4bde4f2c&avatartype=virtual&randomnumber=5478
METHOD POST
$_GET
m user
inajax 1
a rectavatar
appid 1
input ca68o1L41a1HkbmhMJVGHu0oFjxYXwadnUT9HnFpnyz5AgiZcsVGecPP38w+wM7XtT79zC5WMWlH8T7LvluCSXS3YUsrcJDoD1ySILNO2xo63hmBAvXVX24f
agent a523e70c80e13e4eaee37c7f4bde4f2c
avatartype virtual
randomnumber 5478
$_POST
avatar1 ...<big>
avatar3 ...<middle>
avatar2 ...<small>
处理程序为:
center\control\user.php : onrectavatar()
程序的返回内容为:
成功时: <?xml version="1.0" ?><root><face success="1"/></root>
失败时: <root><message type="error" value="-1" /></root>
3. 上传完成后,如果 camera.swf 能找到名为 updateavatar() 的 Javascript function,就会调用它。
■ 参数分析
在上面第 0 步生成的 HTML 中,指向 camera.swf 的 URL 携带了一些参数,其中最关键的是 ucapi,它决定了第 1 步和第 2 步的 HTTP Request 发往哪里。
其它几个都是 UCenter 应用系统所需要的参数。camera.swf 是专为 UCenter 设计的,所以它特别支持这几个参数值,也就是说,在访问 camera.swf 的 URL 里包含了什么值,在后续访问 ucapi 的时候就会原样传回来。
camera.swf 没有提供源代码,没办法改造,但并不妨碍我们使用它。比如,我们可以借用 input 这个参数,把自己应用程序所需要的自定义参数(比如 user id)统一编码装在这个值里。
■ 剥离实现
搞清楚了功能操作的细节和参数含义,重新实现这个功能就很容易了。
所谓重新剥离实现,就是在直接借用 camera.swf/locale.xml 这两个文件的前提下,重新编写服务器端的处理程序,实现头像上传功能,脱离 UCenter 独立运行。
理论上任何服务端编程语言都可以,我这里只给出 PHP 的代码。
包含了三个程序文件:
avatar.php -- 实现了上面“基本步骤”中提到的全部功能
camera.swf -- 提取自 UCenter
locale.xml -- 提取自 UCenter
将这三个文件部署到 web server 上,然后访问 http://localhost/avatar.php 即可。还可以在 URL 上指定一个 uid 作为“用户标识”,比如 http://localhost/avatar.php?uid=5
程序下载地址: http://maquan.download.csdn.net/
没有合适的资源?快使用搜索试试~ 我知道了~
flash头像上传,拍照,裁剪(.net,java,php)
共77个文件
jpg:13个
dll:7个
cs:7个
4星 · 超过85%的资源 需积分: 0 31 下载量 27 浏览量
2015-05-13
09:26:45
上传
评论
收藏 1.76MB RAR 举报
温馨提示
这个功能其实是在 UCenter 中实现的(这是 Discuz! 和 UCHome 等其它相关产品都依赖的公共模块),通过一个 Flash 文件(camera.swf),跟服务端的 PHP 程序配合完成的。 这是从UCenter中上传头像功能的剥离,支持.net,java,php三种程序
资源推荐
资源详情
资源评论
收起资源包目录
flash头像上传,拍照,裁剪(.net,java,php).rar (77个子文件)
Avatar_.net.rar 153KB
ImgCropper_java
avatar.jsp 4KB
locale.xml 9KB
camera.swf 77KB
data
5_big.jpg 5KB
6.jpg 821KB
5.jpg 25KB
5_small.jpg 1KB
5_middle.jpg 4KB
common.js 6KB
Avatar_.net
WebUI
Default.aspx.designer.cs 1KB
images
common
locale.xml 9KB
camera.swf 77KB
upload
avatarstemp
1.jpg 349KB
Thumbs.db 6KB
avatars
1
large.jpg 10KB
Thumbs.db 12KB
small.jpg 2KB
medium.jpg 5KB
Thumbs.db 23KB
noavatar_medium.gif 8KB
WebUI.csproj.user 1KB
Properties
AssemblyInfo.cs 1KB
WebUI.csproj 4KB
obj
Debug
WebUI.pdb 12KB
TempPE
WebUI.dll 5KB
WebUI.csproj.FileListAbsolute.txt 669B
Default.aspx.cs 1KB
App_Data
Default.aspx 5KB
bin
WebUI.pdb 12KB
WebUI.dll 5KB
Web.config 7KB
Ajax.ashx 5KB
Avatar.sln 1KB
Common
Class1.cs 158B
Properties
AssemblyInfo.cs 1KB
obj
Debug
Common.csproj.FileListAbsolute.txt 690B
TempPE
Common.pdb 8KB
Common.dll 4KB
Common.csproj 2KB
bin
Debug
Common.pdb 8KB
Common.dll 4KB
Avatar
Avatar.csproj 4KB
images
common
locale.xml 9KB
camera.swf 77KB
upload
avatars
Thumbs.db 23KB
noavatar_medium.gif 8KB
Web.Release.config 1KB
Properties
AssemblyInfo.cs 1KB
Web.Debug.config 1KB
Avatar.csproj.user 1KB
新建 文本文档.txt 0B
obj
Debug
ResolveAssemblyReference.cache 9KB
TempPE
Avatar.csproj.FileListAbsolute.txt 896B
DesignTimeResolveAssemblyReferencesInput.cache 7KB
Avatar.pdb 42KB
Avatar.dll 5KB
Default.aspx.cs 1KB
Default.aspx 5KB
bin
Newtonsoft.Json.dll 60KB
Avatar.pdb 42KB
Avatar.dll 5KB
Web.config 6KB
Ajax.ashx 5KB
Avatar.suo 25KB
ImgCropper_php
index.html 635B
locale.xml 9KB
avatar.php 7KB
camera.swf 77KB
common11.js 104KB
data
5_big.jpg 5KB
5.jpg 25KB
Thumbs.db 15KB
5_small.jpg 1KB
5_middle.jpg 4KB
common.js 6KB
readme.txt 7KB
共 77 条
- 1
资源评论
- janes_20112015-05-13终于找到了,谢谢了啊
- CQHMI2015-09-12还好,不是我想要的,是安卓系统的
- 幽灵一只2020-08-15资源很好,评价得分
yushuaixm
- 粉丝: 3
- 资源: 74
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功