上传 Uploader

示例

基本形式

<uploader url="/upload"
    on-success={this._onSuccess($event)}
    on-error={this._onError($event)}>
    <button class="u-btn">上传</button>
</uploader>

var component = new RGUI.Component({
    template: template,
    _onSuccess: function($event) {
        RGUI.Notify.success($event.data);
    },
    _onError: function($event) {
        RGUI.Notify.error($event.message);
    }
});

注意：在IE中实现上传功能时，需要将响应头的Content-Type设置为text/plain或text/html，而不能是application/json，否则IE会提示用户下载返回的数据。

禁用组件

<uploader url="/upload" disabled>
    <button class="u-btn" disabled>上传</button>
</uploader>

文件类型限制

<uploader url="/upload" extensions="jpg,gif,png"
    on-success={this._onSuccess($event)}
    on-error={this._onError($event)}>
    <button class="u-btn">上传</button>
</uploader>

var component = new RGUI.Component({
    template: template,
    _onSuccess: function($event) {
        RGUI.Notify.success($event.data);
    },
    _onError: function($event) {
        RGUI.Notify.error($event.message);
    }
});

文件大小限制

<uploader url="/upload" maxSize="10kB"
    on-success={this._onSuccess($event)}
    on-error={this._onError($event)}>
    <button class="u-btn">上传</button>
</uploader>

var component = new RGUI.Component({
    template: template,
    _onSuccess: function($event) {
        RGUI.Notify.success($event.data);
    },
    _onError: function($event) {
        RGUI.Notify.error($event.message);
    }
});

显示上传进度条

<uploader url="/upload"
    on-success={this._onSuccess($event)}
    on-error={this._onError($event)}
    on-progress={this._onProgress($event)}>
    <button class="u-btn">上传</button>
</uploader>

var component = new RGUI.Component({
    template: template,
    _onSuccess: function($event) {
        RGUI.Notify.success($event.data);
    },
    _onError: function($event) {
        RGUI.Notify.error($event.message);
    },
    _onProgress($event) {
        RGUI.Notify.error($event.data);
    },
});

API

Class

Uploader

继承自。

Options

new Uploader()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.url`	string	`''`	outside => inside	上传路径
`data.dataType`	string	`'json'`	outside => inside	接收数据类型。可以是：`text`、`xml`、`json`。
`data.data`	Object		outside => inside	附加数据
`data.name`	string	`'file'`	outside => inside	上传文件的name
`data.extensions`	string string[]	`''`	outside => inside	可上传的扩展名。默认为空，表示可上传任意文件类型的文件；可以为字符串，多个扩展名用`,`隔开，如：'png,jpg,gif,noext'；也可以为数组，如：['png', 'jpg', 'gif', 'noext']。'noext'表示允许文件没有扩展名。
`data.maxSize`	string number	`''`	outside => inside	可上传的最大文件大小。默认为空，表示可上传任意大小的文件；如果为数字，则表示单位为字节；如果为字符串，可以添加以下单位：`kB`、`MB`、`GB`。
`data.sending`	boolean	`false`	outside <= inside	是否正在上传
`data.disabled`	boolean	`false`	outside => inside	是否禁用
`data.visible`	boolean	`true`	outside => inside	是否显示
`data.class`	string	`''`	outside => inside	补充class

Methods

uploader.upload()

弹出文件对话框并且上传文件

参数	类型	默认值
无参数
返回值	类型	描述
无返回值

Events

uploader.$on('error')

上传错误时触发

属性	类型	描述
`sender`	object	事件发送对象
`name`	object	ExtensionError
`message`	object	错误信息
`extensions`	object	可上传的扩展名

uploader.$on('error')

上传错误时触发

属性	类型	描述
`sender`	object	事件发送对象
`name`	object	SizeError
`message`	object	错误信息
`maxSize`	object	可上传的最大文件大小
`size`	object	当前文件大小

uploader.$on('sending')

发送前触发

属性	类型	描述
`sender`	object	事件发送对象
`data`	object	待发送的数据

uploader.$on('progress')

发送中触发

属性	类型	描述
`sender`	object	事件发送对象
`data`	object	待发送的数据

uploader.$on('error')

上传错误时触发

属性	类型	描述
`sender`	object	事件发送对象
`name`	object	ResponseError
`message`	object	错误信息

uploader.$on('complete')

上传完成时触发

属性	类型	描述
`sender`	object	事件发送对象
`xml`	object	返回的xml

uploader.$on('success')

上传成功时触发

属性	类型	描述
`sender`	object	事件发送对象
`data`	object	返回的数据