e-ngx-fileupload
基于Angular的文件上传组件。
依赖的第三方插件:bootstrap-fileinput
Usage
-
Install
npm install --save e-ngx-fileupload@latest -
Set in the .angular-cli.json(@angular/cli)
"styles":,"scripts": -
Add the ENgxFileUploadModule
; -
Use in the template
-
Use in the component
fileInputOpts: any =;ready $event: anyfilebatchuploadcomplete $event: anyfilebatchuploaderror $event: anyfileuploaded $event: anyfileuploaderror $event: any
API
exportAs
eNgxFileUpload
- 导出的指令变量,可在模板获取指令类并调用(#eNgxFileUpload="eNgxFileUpload"
)。
Inputs
eNgxFileUpload
(Object
) - 与bootstrap-fileinput配置属性一致,默认配置如下:
defaultOpts: any =;
Outputs
-
ready
- fileinput初始化完成的事件,$event为当前ENgxFileInputDirective实例 -
fileuploaded
- 单个文件上传成功的事件,$event = {event: event, data: data, previewId: previewId, index: index} -
fileuploaderror
- 单个文件上传失败的事件 $event = {event: event, data: data, msg: msg} -
filebatchuploadcomplete
- 批量文件上传完成的事件,$event = {event: event, data: data, previewId: previewId, index: index} -
filebatchuploadsuccess
- 批量文件上传成功的事件,$event = {event: event, data: data, previewId: previewId, index: index} -
filebatchuploaderror
- 批量文件上传失败的事件 $event = {event: event, data: data, msg: msg} -
changes
- 当通过文件浏览按钮在文件浏览窗中选择单个文件或多个文件时,将触发此事件 $event = event -
fileclear
- 当通过文件移除按钮(移除所有文件)或预览窗口关闭图标被按下以清除文件预览时触发此事件。 -
filereset
- 当文件输入被重置为初始值时触发此事件,没有文件的时候。 -
filepreupload
- 此事件仅在ajax上传时以及每个缩略图文件上传之前触发。
Instance Method
disable(): void
- 禁用上传控件enable(): void
- 启用上传控件reset(): void
- 重置上传控件destroy(): void
- 销毁上传控件refresh(): void
- 刷新上传控件clear(): void
- 清空上传控件upload(): void
- 上传cancel(): void
- 取消上传
Develop
```shell
npm install // 安装依赖包
npm start // 启动项目
```