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

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 上可得到

安装

手动:安装地址请点击。

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/

• 上传选择的单个文件：http://jsfiddle.net/danialfarid/0mz6ff9o/135/

• 用$watch 取消或上传：http://jsfiddle.net/danialfarid/s8kc7wg0/400/

• 图片裁剪和上传：http://jsfiddle.net/danialfarid/xxo3sk41/590/

更多详情请点击这里。