fullAvatarEditor富头像上传编辑器文档

《fullAvatarEditor富头像上传编辑器文档》要点:
本文介绍了fullAvatarEditor富头像上传编辑器文档,希望对您有用。如果有疑问,可以联系我们。

这个富头像上传编辑器文档是网上找的,有点乱,放着备用。官网关闭了,将就着用吧。

fullAvatarEditor调用方法:

new fullAvatarEditor(swfContainerID,[height],[width],flashvars,[callback]);

返回值:object,该对象可调用call方法,请参见 call方法。

swfContainerID

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

height

  • Flash的高度,默认为 600。

width

  • Flash的宽度,默认为 630。

flashvars 配置参数

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

callback 回调函数

  • 执行该函数时,函数中的this关键字指向表示swf的HTMLObjectElement,并且会给函数传递一个表示事件消息的json对象作为参数。

  • json对象的属性如下:

  • code : Number主要用来辨识消息的具体来源和内容,以便客户端知道如何处理。

  • type : Number0 表示成功,1 表示警告,2 表示错误,3 表示异常。

  • content : *表示消息的内容。可能的值:

codetypecontent描述
10
页面成功加载组件后触发的事件消息。
2
  • 0

  • 2


  • 加载图片成功时触发的事件消息。

  • 加载图片失败时触发的事件消息。

3
  • 0

  • 1

  • 2


  • 摄像头已准备就绪且用户已允许使用。

  • 摄像头已准备就绪但用户未允许使用!

  • 摄像头被占用!

42选择的原图片文件大小,带单位。如:8.88MB选择的原图片文件大小超出了指定的值。
5
  • 0

  • 1

  • 2

  • 3

  • 上传接口返回的内容。

  • 表示错误原因的字符串。

  • 表示图片上传成功。

  • 表示图片上传失败,失败原因由上传接口定义!

  • 表示图片上传失败,指定的上传地址不存在或有问题!

  • 表示图片上传失败,发生了安全性错误!

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

  • object.call(methodName[,methodParameter]);

methodName:String要调用的flash内的方法名称。
methodParameter:String传递到该方法的参数。
  • 该方法供 new fullAvatarEditor 返回的对象(HTMLObjectElement)调用,主要是调用flash里的方法。

可调用的方法枚举表

methodNamemethodParameter功能描述
changePanelupload 或 webcam切换到本地上传图片选择面板或摄像头拍照面板。
loadPic要加载的图片的url。加载网络图片。
pressShutter
执行拍照操作。
srcUploadtrue|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对象。

{

    success : true,//该名/值对是必须定义的,表示上传成功

    sourceUrl : 原图片位于服务器的虚拟路径,

    avatarUrls: [头像图片位于服务器的虚拟路径,..]

}

{

    success : false,//该名/值对是必须定义的,表示上传失败

    msg : 上传的原图文件大小超出限值了!

}

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

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;

        }

}

});


版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)