概述
ng-file-upload 是一个 AngularJS 的第三方文件上传组件。它提供了丰富的配置选项和事件钩子，可以轻松地实现图片、视频、音频等各种类型文件的上传。
该组件最大的特点是支持多文件上传和进度条显示，同时也提供了强大的定制化能力，可以根据自己的需求来扩展组件功能。
安装
使用 bower 安装：
bower install ng-file-upload
引入文件：
<script src="/path/to/angular.js"></script> <script src="/path/to/ng-file-upload.js"></script>
添加依赖：
angular.module('myApp', ['ngFileUpload']);
示例
以下是一个简单的示例，演示了如何使用 ng-file-upload 实现文件上传和进度条显示：
HTML：
-- -------------------- ---- ------- ---- -------------- ----------------------- ------ ----------- ---------- --------------- ----------- ----------------------- ---------------------- ------------------- -------------------- ------------------- ---- ------- ------ ------- ------------------------------- ---- ---------------- ----------------- -- --- ---- -------------------- ------------------ ---------------------------- ----------------- ------------------- ----------------------------- ------------- ------ ------ ------展开代码
JavaScript：
-- -------------------- ---- ------- ----------------------- ----------------- --------------------- ---------------- ------- - --------------- - --- ------------- - ---------- - --- ---- - ------------ -- ------ - --------------- - -- --------------- ---- ---------- ----- ------ ----- ---------------------- - ------------------- - ----------- -- -------------- - ------------------- - ------------- -- ------------- - --------------- - -------------- - ---------- - ----------- --- - -- ---展开代码
指南
上传配置
url: 后端处理文件上传的接口地址。
data: 上传时附带的额外数据，可以是一个对象或一个函数。
headers: 请求头信息，可以是一个对象或一个函数。
method: 请求方法，默认为 POST。
withCredentials: 是否允许在跨域请求中携带凭证，如 cookie 等，默认为 false。
timeout: 请求超时时间，单位为毫秒，默认为 0，表示不设置超时。
transformRequest: 对上传数据进行转换的函数，可以是一个数组。默认情况下，ng-file-upload 将把上传数据转换为 FormData 格式，然后发送到服务器。
文件选择配置
ngf-select: 标识该元素为上传按钮。
ng-model: 绑定上传文件的变量。
name: 表单域的名称，与后端接口对应。
ngf-pattern: 限制上传文件类型的正则表达式。
ngf-accept: 限制上传文件类型的 MIME 类型。
ngf-max-size: 限制上传文件大小的最大值，单位为字节。
ngf-min-height: 限制图片上传高度的最小值，仅针对图片有效。
ngf-resize: 对上传图片进行缩放和裁剪，可以是一个对象或一个函数。
事件钩子
beforeUpload: 在上传开始前执行，可以用来取消上传或修改上传配置。
progress: 在上传过程中不断执行，每次更新进度条。
success: 上传成功后执行。
error: 上传失败后执行。
扩展组件
ng-file-upload 提供了多种扩展组件的方法，例如添加自定义指令、修改默认配置
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/1212
