essence-ng2-fileupload

essence-ng2-fileupload is a fileUpload Directive for Angular.

依赖的第三方插件：bootstrap-fileinput

Usage

1. Install

``shell
npm install --save essence-ng2-fileupload@latest
`

2. Set in the .angular-cli.json（@angular/cli）

`json
"styles": [
"../node_modules/font-awesome/css/font-awesome.min.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/bootstrap-fileinput/css/fileinput.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap-fileinput/js/plugins/piexif.min.js",
"../node_modules/bootstrap-fileinput/js/plugins/sortable.min.js",
"../node_modules/bootstrap-fileinput/js/plugins/purify.min.js",
"../node_modules/bootstrap-fileinput/js/fileinput.min.js",
"../node_modules/bootstrap-fileinput/themes/fa/theme.min.js",
"../node_modules/bootstrap-fileinput/js/locales/zh.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
]
`

3. Add the EssenceNg2FileInputModule

`typescript
import {EssenceNg2FileUploadModule} from "essence-ng2-fileupload";
@NgModule({
imports: [
EssenceNg2FileUploadModule
]
})
`

4. Use in the template

`html
[essence-ng2-fileupload]="fileInputOpts"
(ready)="ready($event)"
(filebatchuploadcomplete)="filebatchuploadcomplete($event)"
(filebatchuploaderror)="filebatchuploaderror($event)"
(fileuploaded)="fileuploaded($event)"
(fileuploaderror)="fileuploaderror($event)">
`

5. Use in the component

`typescript
fileInputOpts: any = {
uploadUrl: "/App/Goods/UploadImges"
};

ready ($event: any) {
console.log($event);
}

filebatchuploadcomplete ($event: any) {
console.log($event);
}

filebatchuploaderror ($event: any) {
console.log($event);
}

fileuploaded ($event: any) {
console.log($event);
}

fileuploaderror ($event: any) {
console.log($event);
}
`

API

$3

- eNgFileupload - 导出的指令变量，可在模板获取指令类并调用（#eNgFileupload="eNgFileupload"）。

$3

- ssence-ng2-fileupload（Object） - 与bootstrap-fileinput配置属性一致，默认配置如下：
`typescript
defaultOpts: any = {
language: "zh",
showCaption: false,
resizeImage: true,
allowedPreviewTypes: ['image', 'html', 'video', 'audio', 'flash'],
previewFileIconSettings: {
'doc': '',
'xls': '',
'ppt': '',
'pdf': '',
'zip': '',
'htm': '',
'mov': '',
'mp3': '',
'txt': '',
},
previewFileExtSettings: {
'doc': function (ext) {
return ext.match(/(doc|docx)$/i);
},
'xls': function (ext) {
return ext.match(/(xls|xlsx)$/i);
},
'ppt': function (ext) {
return ext.match(/(ppt|pptx)$/i);
},
'zip': function (ext) {
return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);
},
'htm': function (ext) {
return ext.match(/(php|js|css|htm|html)$/i);
},
'txt': function (ext) {
return ext.match(/(txt|ini|md)$/i);
},
'mov': function (ext) {
return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);
},
'mp3': function (ext) {
return ext.match(/(mp3|wav)$/i);
},
}
};
`

$3

- ready - fileinput初始化完成的事件，$event为当前EssenceNg2FileInputDirective实例

- 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

$3

- disable(): void - 禁用上传控件
- enable(): void - 启用上传控件
- reset(): void - 重置上传控件
- destroy(): void - 销毁上传控件
- refresh(): void - 刷新上传控件
- clear(): void - 清空上传控件
- upload(): void - 上传
- cancel(): void - 取消上传

Develop

`shell
npm install // 安装依赖包

npm start // 启动项目
``

License