{"id":21827498,"url":"https://github.com/laixiangran/e-ngx-fileupload","last_synced_at":"2025-04-14T05:43:19.972Z","repository":{"id":57218016,"uuid":"90519571","full_name":"laixiangran/e-ngx-fileupload","owner":"laixiangran","description":"基于Angular的文件上传组件，依赖第三方插件：bootstrap-fileinput","archived":false,"fork":false,"pushed_at":"2018-11-15T01:43:42.000Z","size":7564,"stargazers_count":0,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-12-28T09:24:59.884Z","etag":null,"topics":["angular","bootstrap-fileinput","fileupload"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/laixiangran.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-07T08:41:45.000Z","updated_at":"2018-04-24T08:34:25.000Z","dependencies_parsed_at":"2022-09-07T23:11:00.424Z","dependency_job_id":null,"html_url":"https://github.com/laixiangran/e-ngx-fileupload","commit_stats":null,"previous_names":["laixiangran/essence-ng2-fileupload"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-fileupload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-fileupload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-fileupload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/laixiangran%2Fe-ngx-fileupload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/laixiangran","download_url":"https://codeload.github.com/laixiangran/e-ngx-fileupload/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248830420,"owners_count":21168272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","bootstrap-fileinput","fileupload"],"created_at":"2024-11-27T18:13:21.622Z","updated_at":"2025-04-14T05:43:19.948Z","avatar_url":"https://github.com/laixiangran.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# e-ngx-fileupload\n\n基于Angular的文件上传组件。\n\n依赖的第三方插件：[bootstrap-fileinput](http://plugins.krajee.com/file-input)\n\n## Usage\n\n1. Install\n\n\t```shell\n\tnpm install --save e-ngx-fileupload@latest\n\t```\n\t\n2. Set in the .angular-cli.json（@angular/cli）\n\n\t```json\n    \"styles\": [\n        \"../node_modules/font-awesome/css/font-awesome.min.css\",\n        \"../node_modules/bootstrap/dist/css/bootstrap.min.css\",\n        \"../node_modules/bootstrap-fileinput/css/fileinput.min.css\"\n    ],\n    \"scripts\": [\n        \"../node_modules/jquery/dist/jquery.min.js\",\n        \"../node_modules/bootstrap-fileinput/js/plugins/piexif.min.js\",\n        \"../node_modules/bootstrap-fileinput/js/plugins/sortable.min.js\",\n        \"../node_modules/bootstrap-fileinput/js/plugins/purify.min.js\",\n        \"../node_modules/bootstrap-fileinput/js/fileinput.min.js\",\n        \"../node_modules/bootstrap-fileinput/themes/fa/theme.min.js\",\n        \"../node_modules/bootstrap-fileinput/js/locales/zh.js\",\n        \"../node_modules/bootstrap/dist/js/bootstrap.min.js\"\n    ]\n\t```\n\n3. Add the ENgxFileUploadModule\n\n\t```typescript\n\timport { ENgxFileUploadModule } from \"e-ngx-fileupload\";\n\t@NgModule({\n\t    imports: [\n\t        ENgxFileUploadModule\n\t    ]\n\t})\n\t```\n\n4. Use in the template\n\n\t```html\n\t\u003cinput id=\"pic_file\" type=\"file\" class=\"file\" name=\"file\" multiple\n           [eNgxFileUpload]=\"fileInputOpts\"\n           (ready)=\"ready($event)\"\n           (filebatchuploadcomplete)=\"filebatchuploadcomplete($event)\"\n           (filebatchuploaderror)=\"filebatchuploaderror($event)\"\n           (fileuploaded)=\"fileuploaded($event)\"\n           (fileuploaderror)=\"fileuploaderror($event)\"\u003e\n\t```\n\n5. Use in the component\n\n\t```typescript\n\tfileInputOpts: any = {\n        uploadUrl: \"/App/Goods/UploadImges\"\n    };\n\n    ready ($event: any) {\n        console.log($event);\n    }\n\n    filebatchuploadcomplete ($event: any) {\n        console.log($event);\n    }\n\n    filebatchuploaderror ($event: any) {\n        console.log($event);\n    }\n\n    fileuploaded ($event: any) {\n        console.log($event);\n    }\n\n    fileuploaderror ($event: any) {\n        console.log($event);\n    }\n\t```\n\n## API\n\n### exportAs\n\n- `eNgxFileUpload` - 导出的指令变量，可在模板获取指令类并调用（`#eNgxFileUpload=\"eNgxFileUpload\"`）。\n\n### Inputs\n\n- `eNgxFileUpload`（`Object`） - 与[bootstrap-fileinput配置属性](http://plugins.krajee.com/file-input#options)一致，默认配置如下：\n```typescript\ndefaultOpts: any = {\n    language: \"zh\",\n    showCaption: false,\n    resizeImage: true,\n    allowedPreviewTypes: ['image', 'html', 'video', 'audio', 'flash'],\n    previewFileIconSettings: {\n        'doc': '\u003ci class=\"fa fa-file-word-o text-primary\"\u003e\u003c/i\u003e',\n        'xls': '\u003ci class=\"fa fa-file-excel-o text-success\"\u003e\u003c/i\u003e',\n        'ppt': '\u003ci class=\"fa fa-file-powerpoint-o text-danger\"\u003e\u003c/i\u003e',\n        'pdf': '\u003ci class=\"fa fa-file-pdf-o text-danger\"\u003e\u003c/i\u003e',\n        'zip': '\u003ci class=\"fa fa-file-archive-o text-muted\"\u003e\u003c/i\u003e',\n        'htm': '\u003ci class=\"fa fa-file-code-o text-info\"\u003e\u003c/i\u003e',\n        'mov': '\u003ci class=\"fa fa-file-movie-o text-warning\"\u003e\u003c/i\u003e',\n        'mp3': '\u003ci class=\"fa fa-file-audio-o text-warning\"\u003e\u003c/i\u003e',\n        'txt': '\u003ci class=\"fa fa-file-text text-info\"\u003e\u003c/i\u003e',\n    },\n    previewFileExtSettings: {\n        'doc': function (ext) {\n            return ext.match(/(doc|docx)$/i);\n        },\n        'xls': function (ext) {\n            return ext.match(/(xls|xlsx)$/i);\n        },\n        'ppt': function (ext) {\n            return ext.match(/(ppt|pptx)$/i);\n        },\n        'zip': function (ext) {\n            return ext.match(/(zip|rar|tar|gzip|gz|7z)$/i);\n        },\n        'htm': function (ext) {\n            return ext.match(/(php|js|css|htm|html)$/i);\n        },\n        'txt': function (ext) {\n            return ext.match(/(txt|ini|md)$/i);\n        },\n        'mov': function (ext) {\n            return ext.match(/(avi|mpg|mkv|mov|mp4|3gp|webm|wmv)$/i);\n        },\n        'mp3': function (ext) {\n            return ext.match(/(mp3|wav)$/i);\n        },\n    }\n};\n```\n\n### Outputs\n\n- `ready` - fileinput初始化完成的事件，$event为当前ENgxFileInputDirective实例\n\n- `fileuploaded` - 单个文件上传成功的事件，$event = {event: event, data: data, previewId: previewId, index: index}\n\n- `fileuploaderror` - 单个文件上传失败的事件 $event = {event: event, data: data, msg: msg}\n\n- `filebatchuploadcomplete` - 批量文件上传完成的事件，$event = {event: event, data: data, previewId: previewId, index: index}\n\n- `filebatchuploadsuccess` - 批量文件上传成功的事件，$event = {event: event, data: data, previewId: previewId, index: index}\n\n- `filebatchuploaderror` - 批量文件上传失败的事件 $event = {event: event, data: data, msg: msg}\n\n- `changes` - 当通过文件浏览按钮在文件浏览窗中选择单个文件或多个文件时，将触发此事件 $event = event\n\n- `fileclear` - 当通过文件移除按钮（移除所有文件）或预览窗口关闭图标被按下以清除文件预览时触发此事件。\n\n- `filereset` - 当文件输入被重置为初始值时触发此事件，没有文件的时候。\n\n- `filepreupload` - 此事件仅在ajax上传时以及每个缩略图文件上传之前触发。\n\n\n### Instance Method\n\n- `disable(): void` - 禁用上传控件\n- `enable(): void` - 启用上传控件\n- `reset(): void` - 重置上传控件\n- `destroy(): void` - 销毁上传控件\n- `refresh(): void` - 刷新上传控件\n- `clear(): void` - 清空上传控件\n- `upload(): void` - 上传\n- `cancel(): void` - 取消上传\n\n## Develop\n\n\t```shell\n\tnpm install // 安装依赖包\n\t\n\tnpm start // 启动项目\n\t```\n\n# License\n\n[![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat)](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-fileupload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flaixiangran%2Fe-ngx-fileupload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flaixiangran%2Fe-ngx-fileupload/lists"}