上传 Uploader

示例

基本形式

<uploader url="/upload"
    on-success={this._onSuccess($event)}
    on-error={this._onError($event)} />

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 title="上传文件" url="/upload"
    on-success={this._onSuccess($event)}
    on-error={this._onError($event)} />

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)}>
    <a class="u-btn u-btn-primary">上传 <i class="u-icon u-icon-upload"></i></a>
</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" disabled />

文件类型限制

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

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)} />

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

API

Class

Uploader

继承自Component。

Options

new Uploader()

参数	类型	默认值	数据流向	描述
`data`	object			绑定属性
`data.title`	string	`''`	outer => inner	按钮文字
`data.url`	string	`''`	outer => inner	上传路径
`data.dataType`	string	`'json'`	outer => inner	数据类型。可以是：`text`、`xml`、`json`、`script`。
`data.data`	object		outer => inner	附加数据
`data.name`	string	`'file'`	outer => inner	上传文件的name
`data.extensions`	string string[]	`''`	outer => inner	可上传的扩展名。默认为空，表示可上传任意文件类型的文件；可以为字符串，多个扩展名用`,`隔开，如：'png,jpg,gif'；也可以为数组，如：['png', 'jpg', 'gif']。
`data.maxSize`	string number	`''`	outer => inner	可上传的最大文件大小。默认为空，表示可上传任意大小的文件；如果为数字，则表示单位为字节；如果为字符串，可以添加以下单位：`kB`、`MB`、`GB`。
`data.disabled`	boolean	`false`	outer => inner	是否禁用
`data.visible`	boolean	`true`	outer => inner	是否显示
`data.class`	string	`''`	outer => inner	补充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('error')

上传错误时触发

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

uploader.$on('complete')

上传完成时触发

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

uploader.$on('success')

上传成功时触发

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