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
安装
手动:安装地址请点击。
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
<script src="angular(.min).js"></script> <script src="ng-file-upload-shim(.min).js"></script> <!-- for no html5 browsers support --> <script src="ng-file-upload(.min).js"></script>
使用
示例:
-
表单提交和验证的上传: http://jsfiddle.net/danialfarid/maqbzv15/1118/
-
对于多个文件的逐一上传: http://jsfiddle.net/danialfarid/2vq88rfs/136/
-
对于多个文件中的请求文件上传(仅html5):http://jsfiddle.net/danialfarid/huhjo9jm/5/
-
用$watch 取消或上传:http://jsfiddle.net/danialfarid/s8kc7wg0/400/
更多详情请点击这里。