https://github.com/laixiangran/e-ngx-fileupload
基于Angular的文件上传组件，依赖第三方插件：bootstrap-fileinput
https://github.com/laixiangran/e-ngx-fileupload
angular bootstrap-fileinput fileupload
Last synced: about 1 year ago
JSON representation
基于Angular的文件上传组件，依赖第三方插件：bootstrap-fileinput
- Host: GitHub
- URL: https://github.com/laixiangran/e-ngx-fileupload
- Owner: laixiangran
- License: mit
- Created: 2017-05-07T08:41:45.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-11-15T01:43:42.000Z (over 7 years ago)
- Last Synced: 2024-12-28T09:24:59.884Z (over 1 year ago)
- Topics: angular, bootstrap-fileinput, fileupload
- Language: TypeScript
- Homepage:
- Size: 7.21 MB
- Stars: 0
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# e-ngx-fileupload
基于Angular的文件上传组件。
依赖的第三方插件：[bootstrap-fileinput](http://plugins.krajee.com/file-input)
## Usage
1. Install
```shell
npm install --save e-ngx-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 ENgxFileUploadModule
```typescript
import { ENgxFileUploadModule } from "e-ngx-fileupload";
@NgModule({
imports: [
ENgxFileUploadModule
]
})
```
4. Use in the template
```html
```
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
### exportAs
- `eNgxFileUpload` - 导出的指令变量，可在模板获取指令类并调用（`#eNgxFileUpload="eNgxFileUpload"`）。
### Inputs
- `eNgxFileUpload`（`Object`） - 与[bootstrap-fileinput配置属性](http://plugins.krajee.com/file-input#options)一致，默认配置如下：
```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);
},
}
};
```
### 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 // 启动项目
```
# License
[](/LICENSE)