API Docs for: 0.2
Show:

JC.AjaxUpload Class

Ajax 文件上传

require: JC.BaseMVC , JC.Panel

JC Project Site | API docs | demo link

可用的 html attribute

cauStyle = string, default = g1
按钮显示的样式, 可选样式:
绿色按钮
g1, g2, g3
白色/银色按钮
w1, w2, w3
cauButtonText = string, default = 上传文件
定义上传按钮的显示文本
cauHideButton = bool, default = false( no label ), true( has label )
上传完成后是否隐藏上传按钮
cauButtonAfter= bool
是否把上传按钮放在后面
cauUrl = url, require
上传文件的接口地址
如果 url 带有参数 callback, 返回数据将以 jsonp 方式处理
cauJSONPName = function name
显式声明上传后返回数据的 jsonp 回调名

jsonp 返回数据示例:

url: ?callback=callback
data: <script> window.parent && window.parent.callback && window.parent.callback( {"errorno":0,"errmsg":"","data":{"name":"test.jpg","url":".\/data\/images\/test.jpg"}} ); </script>
cauFileExt = file ext, optional
允许上传的文件扩展名, 例: ".jpg, .jpeg, .png, .gif"
cauFileSize = [ KB | MB | GB ], default = 1024 MB
上传文件大小限制
cauFileName = string, default = file
上传文件的 name 属性
cauValueKey = string, default = url
返回数据用于赋值给 hidden/textbox 的字段
cauLabelKey = string, default = name
返回数据用于显示的字段
cauSaveLabelSelector = selector
指定保存 cauLabelKey 值的 selector
cauStatusLabel = selector, optional
开始上传时, 用于显示状态的 selector
cauDisplayLabel = selector, optional
上传完毕后, 用于显示文件名的 selector
cauUploadDoneCallback = function, optional
文件上传完毕时, 触发的回调
function cauUploadDoneCallback( _json, _selector, _frame ){
   var _ins = this;
   //alert( _json ); //object object
}
cauUploadErrorCallback = function, optional
文件上传完毕时, 发生错误触发的回调
function cauUploadErrorCallback( _json, _selector, _frame ){
   var _ins = this;
   //alert( _json ); //object object
}
cauDisplayLabelCallback = function, optional, return = string
自定义上传完毕后显示的内容 模板
function cauDisplayLabelCallback( _json, _label, _value ){
   var _selector = this
       , _label = JC.f.printf( '<a href="{0}" class="green js_auLink" target="_blank">{1}</a>{2}'
                       , _value, _label
                       ,  ' <a href="javascript:" class="btn btn-cls2 js_cleanCauData"></a>  '
                   )
       ;
   return _label;
}
cauViewFileBox = selector
用于显示文件链接的容器
cauViewFileBoxItemTpl = selector
cauViewFileBox 的脚本模板

Constructor

JC.AjaxUpload

(
  • _selector
)

Parameters:

  • _selector Selector

Example:

       <div>
           <input type="hidden" class="js_compAjaxUpload" value=""
               cauStyle="w1"
               cauButtonText="上传资质文件"
               cauUrl="/ignore/JQueryComps_dev/comps/AjaxUpload/_demo/data/handler.php"
               cauFileExt=".jpg, .jpeg, .png, .gif"
               cauFileName="file"
               cauLabelKey="name"
               cauValueKey="url"
               cauStatusLabel="/label.js_statusLabel"
               cauDisplayLabel="/label.js_fileLabel"
               />
           <label class="js_fileLabel" style="display:none"></label>
           <label class="js_statusLabel" style="display:none">文件上传中, 请稍候...</label>
       </div>
       POST 数据:
           ------WebKitFormBoundaryb1Xd1FMBhVgBoEKD
           Content-Disposition: form-data; name="file"; filename="disk.jpg"
           Content-Type: image/jpeg
       返回数据:
           {
               "errorno": 0, 
               "data":
               {
                   "url": "/ignore/JQueryComps_dev/comps/AjaxUpload/_demo/data/images/test.jpg", 
                   "name": "test.jpg"
               }, 
               "errmsg": ""
           }

Methods

_beforeInit

() private

初始化之前调用的方法

_init

(
  • _selector
)
private

内部初始化方法

Parameters:

  • _selector Selector

_inited

() private

内部初始化完毕时, 调用的方法

_initHanlderEvent

() private

内部事件初始化方法

disable

()

禁用上传按钮

enable

()

启用上传按钮

getInstance

(
  • _selector
)
AjaxUploadInstance static

获取或设置 AjaxUpload 的实例

Parameters:

  • _selector Selector

Returns:

AjaxUploadInstance:

init

(
  • _selector
)
Array static

初始化可识别的组件

Parameters:

  • _selector Selector

Returns:

Array:

instance array

notification

(
  • _evtName
  • _args
)

通知选择器有新事件
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

notificationHandler

(
  • _evtName
  • _args
)

通知选择器有新事件, 有返回结果
JC 组件以后不会在 HTML 属性里放回调, 改为触发 selector 的事件

Parameters:

Returns:

:

on

(
  • _evtName
  • _cb
)

使用 jquery on 绑定事件

Parameters:

Returns:

BaseMVCInstance

selector

()

获取 显示 BaseMVC 的触发源选择器, 比如 a 标签

Returns:

selector

trigger

(
  • _evtName
  • _args
)

使用 jquery trigger 触发绑定事件

Parameters:

Returns:

BaseMVCInstance

triggerHandler

(
  • _evtName
  • _args
)

使用 jquery triggerHandler 触发绑定事件

Parameters:

Returns:

:

update

(
  • _d
)

手动更新数据

Parameters:

Returns:

AjaxUploadInstance

Example:

           JC.AjaxUpload.getInstance( _selector ).update( {
               "errorno": 0, 
               "data":
               {
                   "url": "/ignore/JQueryComps_dev/comps/AjaxUpload/_demo/data/images/test.jpg", 
                   "name": "test.jpg"
               }, 
               "errmsg": ""
           });

Properties

_FRAME_DIR

String private static

frame 文件夹位于库的位置

Default: "comps/AjaxUpload/frame/"

_INS_COUNT

Int protected static

初始化 frame 时递增的统计变量

Default: 1

frameFileName

String static

frame 文件名

Default: "default.html"

randomFrame

Bool static

载入 frame 文件时, 是否添加随机数防止缓存

Default: false