码迷,mamicode.com
首页 > Web开发 > 详细

富头像上传编辑器文档(from www.sysoft.cc)

时间:2014-10-17 01:07:23      阅读:622      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   color   io   os   使用   ar   

调用方法

swfContainerID

  • 用以包裹Flash的HTML元素的ID。

height

  • Flash的高度,默认为 600。

width

  • Flash的宽度,默认为 630。

flashvars 配置参数

名称类型默认值描述
id String fullAvatarEditor 接收消息的swf的ID,用以区分同一页面如果存在多个组件。
upload_url String null 上传图片的接口。该接口需返回一个json字符串,且会原样输出到 callback 回调函数 的参数对象的属性content中,请参见 上传接口的返回数据
quality Number 100 生成的头像图片的质量,取值范围1-100,数值越大生成的图片越清晰,相对地文件也会越大。
isShowUploadResultIconv2.0 Boolean true 在上传完成时(无论成功和失败),是否显示表示上传结果的图标。
原图片
选项卡
图片选择框
按钮和复选框
头像
摄像头相关
提示文本

callback 回调函数

  • 执行该函数时,函数中的this关键字指向表示swf的HTMLObjectElement,并且会给函数传递一个表示事件消息的json对象作为参数。
  • json对象的属性如下:
  • code : Number主要用来辨识消息的具体来源和内容,以便客户端知道如何处理。
  • type : Number0 表示成功,1 表示警告,2 表示错误,3 表示异常。
  • content : *表示消息的内容。
可能值枚举表
codetypecontent描述
1 0   页面成功加载组件后触发的事件消息。
2
  • 0
  • 2
 
  • 加载图片成功时触发的事件消息。
  • 加载图片失败时触发的事件消息。
3
  • 0
  • 1
  • 2
 
  • 摄像头已准备就绪且用户已允许使用。
  • 摄像头已准备就绪但用户未允许使用!
  • 摄像头被占用!
4 2 选择的原图片文件大小,带单位。如:8.88MB 选择的原图片文件大小超出了指定的值。
5
  • 0
  • 1
  • 2
  • 3
  • 上传接口返回的内容。
  • 表示错误原因的字符串。
  • 表示图片上传成功。
  • 表示图片上传失败,失败原因由上传接口定义!
  • 表示图片上传失败,指定的上传地址不存在或有问题!
  • 表示图片上传失败,发生了安全性错误!

call 方法,这些方法在自定义外界元素(如tab、button)时很有用。

  • object.call(methodName[, methodParameter]);
methodName:String 要调用的flash内的方法名称。
methodParameter:String 传递到该方法的参数。
  • 该方法供 new fullAvatarEditor 返回的对象(HTMLObjectElement)调用,主要是调用flash里的方法。
可调用的方法枚举表
methodNamemethodParameter功能描述
changePanel upload 或 webcam 切换到本地上传图片选择面板或摄像头拍照面板。
loadPic 要加载的图片的url。 加载网络图片。
pressShutter   执行拍照操作。
srcUpload true|false 设置是否上传原图片。
upload   执行上传保存的操作。

发送至上传接口的数据

发送方式: post
原图file域: Field Name: __source
File Name: 如果是本地和网络图片为原始文件名(不含扩展名)、如果是摄像头拍照则为 *FromWebcam
头像file域: Field Name: __avatar1,__avatar2,__avatar3,... 即 __avatar + 1至头像总数。
File Name: 同上。
其他文本域: Field Name: __initParams(String) 加载指定url的原图时将该参数追加到url中,可保证视图跟保存头像时一致。可用于修改头像,帮助提升用户体验。注意:上传原图时才会发送该数据。

上传接口的返回数据

接口至少必须返回一个包含名为“success”、值为true(表示上传成功)或false(表示上传失败)的json字符串,且会原样输出到 callback 回调函数 的参数对象的属性content中。
例:当上传成功或失败时可分别返回以下json对象。

1
2
3
4
5
{
    "success" : true,//该名/值对是必须定义的,表示上传成功
    "sourceUrl" : "原图片位于服务器的虚拟路径",
    "avatarUrls": ["头像图片位于服务器的虚拟路径",..]
}

1
2
3
4
{
    "success" : false,//该名/值对是必须定义的,表示上传失败
    "msg" : "上传的原图文件大小超出限值了!"
}

在进行调用时即可如下使用获取返回的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var swf = new fullAvatarEditor(‘swf‘, {
    id: ‘swf‘,
    upload_url: ‘/upload.php‘
}, function(json){
    if (json.code == 5)
    {
        switch(json.type)
        {
            //表示图片上传成功。
            case 0:
                alert(‘原图片位于服务器的虚拟路径为‘+json.content.sourceUrl);
                alert(‘头像图片位于服务器的虚拟路径为‘+json.content.avatarUrls.join(‘,‘));
            break;
            case 1:
                alert(‘头像上传失败,原因:‘ + json.content.msg);//will output:头像上传失败,原因:上传的原图文件大小超出限值了!
            break;
            case 2:
                alert(‘头像上传失败,原因:指定的上传地址不存在或有问题!‘);
            break;
            case 3:
                alert(‘头像上传失败,原因:发生了安全性错误!请联系站长添加crossdomain.xml到网站根目录。‘);
            break;
        }

富头像上传编辑器文档(from www.sysoft.cc)

标签:des   style   blog   http   color   io   os   使用   ar   

原文地址:http://www.cnblogs.com/sysoft/p/4029829.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!