AngularJS文件上传指令 ng-file-upload

系统管理员 2022-05-18 20:12 228阅读 0赞

ng-file-upload 详细介绍

ng-file-upload由轻量级AngularJS文件上传指令构成。

### 特征 ###

*  文件上传/取消程序
 *  文件拖放（仅html5）
 *  剪贴板中的图片复制和浏览器界面的拖放（仅html5）
 *  用户通过使用ngImgCrop进行图片尺寸改变和中间裁剪（本地）（仅html5）
 *  定向修复有关Exif定向数据的JPEG图像文件
 *  断点上传：暂停/继续上传(仅html5)
 *  本地验证支持：文件类型/大小，图像宽度/盖度/透明度，视频/音频和具有可插拔的同步或异步验证的ng-required 
 *  显示所选的图片/音频/视频的缩略图和预览图
 *  支持CORS 和直接的2进制文件上传通过使用Upload.$http()
 *  在 nuget  上有大量的服务器端代码可得到
 *  对于html5浏览器仅需要装载flash FileAPI.
 *  对于IE 8-9，html5 FileReader.readAsDataURL shim
 *  在 [npm][], [bower][], [meteor][], [nuget][] 上可得到

### 安装 ###

手动:安装地址请[点击][Link 1]。

bower:

*  `bower install ng-file-upload-shim --save`(对于没有html5支持)
 *  `bower install ng-file-upload --save`

NuGet: `PM> Install-Package angular-file-upload`

NPM: `npm install ng-file-upload`

### 使用 ###

示例：

*  表单提交和验证的上传： [http://jsfiddle.net/danialfarid/maqbzv15/1118/][http_jsfiddle.net_danialfarid_maqbzv15_1118]
 *  对于多个文件的逐一上传： [http://jsfiddle.net/danialfarid/2vq88rfs/136/][http_jsfiddle.net_danialfarid_2vq88rfs_136]
 *  对于多个文件中的请求文件上传（仅html5）：[http://jsfiddle.net/danialfarid/huhjo9jm/5/][http_jsfiddle.net_danialfarid_huhjo9jm_5]
 *  上传选择的单个文件：[http://jsfiddle.net/danialfarid/0mz6ff9o/135/][http_jsfiddle.net_danialfarid_0mz6ff9o_135]
 *  用$watch 取消或上传：[http://jsfiddle.net/danialfarid/s8kc7wg0/400/][http_jsfiddle.net_danialfarid_s8kc7wg0_400]
 *  图片裁剪和上传：[http://jsfiddle.net/danialfarid/xxo3sk41/590/][http_jsfiddle.net_danialfarid_xxo3sk41_590]

更多详情请点击[这里][Link 2]。

[npm]: https://www.npmjs.com/package/ng-file-upload
[bower]: https://libraries.io/bower/ng-file-upload
[meteor]: https://atmospherejs.com/danialf/ng-file-upload
[nuget]: https://www.nuget.org/packages/angular-file-upload
[Link 1]: https://github.com/danialfarid/ng-file-upload-bower/releases/latest
[http_jsfiddle.net_danialfarid_maqbzv15_1118]: http://jsfiddle.net/danialfarid/maqbzv15/1118/
[http_jsfiddle.net_danialfarid_2vq88rfs_136]: http://jsfiddle.net/danialfarid/2vq88rfs/136/
[http_jsfiddle.net_danialfarid_huhjo9jm_5]: http://jsfiddle.net/danialfarid/huhjo9jm/5/
[http_jsfiddle.net_danialfarid_0mz6ff9o_135]: http://jsfiddle.net/danialfarid/0mz6ff9o/135/
[http_jsfiddle.net_danialfarid_s8kc7wg0_400]: http://jsfiddle.net/danialfarid/s8kc7wg0/400/
[http_jsfiddle.net_danialfarid_xxo3sk41_590]: http://jsfiddle.net/danialfarid/xxo3sk41/590/
[Link 2]: https://github.com/danialfarid/ng-file-upload