` 换句话说.
现在您需要显示上传的文件,只需要循环文件阵列. 文件数组附在命名的流程对象上 `$flow`。 。 。 .
```html
| {{$index+1}} |
{{file.name}} |
```
文件为实例 [流程文件](https://github.com/flowjs/flow.js#flowfile)。 。 。 .
### 快速设置
`````html
```
Need more examples?
============
Clone this repository and go to "ng-flow/samples/basic/index.html".
Single image upload "ng-flow/samples/image/index.html".
How can I drop files?
============
Use `flow-drop` directive:
````html
Drag And Drop your file here
`````
说明:在大多数情况下 `flow-drop` 必须与 `flow-prevent-drop` 指令 `body` 元素,因为它防止文件被载入浏览器.
### 防止在文档上丢弃文件
使用 `flow-prevent-drop` 指令 `body` 元素 :
```html
```
### 丢弃文件时如何添加一些样式 ?
使用 `flow-drag-enter` 指令 :
```html
```
说明: `flow-drag-leave` 属性不能单独使用,它是 `flow-drag-enter` 指令.
### 如何动态禁用投放区域 ?
```html
Drag And Drop your file here
```
见实例 `samples/dataurl/`。 。 。 .
# 如何预览上传的图像 ?
使用流程-img指令 :
```html
![]()
```
一旦添加文件, 图像将自动更新 。 无需开始上传 .
# 我怎么才能为流动设定选项?.js?
使用配置 :
```javascript
var app = angular.module('app', ['flow'])
.config(['flowFactoryProvider', function (flowFactoryProvider) {
flowFactoryProvider.defaults = {
target: '/upload',
permanentErrors:[404, 500, 501]
};
// You can also set default events:
flowFactoryProvider.on('catchAll', function (event) {
...
});
// Can be used with different implementations of Flow.js
// flowFactoryProvider.factory = fustyFlowFactory;
}]);
```
也可以在"flow-init"指令上配置:
```html
```
# 我怎样才能赶上事件?
事件列于内部 `flow-init` 指令 :
```html
```
### 我怎么能在控制器里抓住一个事件?
如果控制器与 `flow-init` 指令或儿童范围, 然后我们就可以赶上事件 `$on`。事件前缀为 `flow::`。 。 。 .
```javascript
$scope.$on('flow::fileAdded', function (event, $flow, flowFile) {
event.preventDefault();//prevent file from uploading
});
```
第二个论点总是 `flow` 实例,然后遵循事件特定参数.
# 如何分配流到母范围?
使用 `flow-name` 属性并设定为范围中的任何变量.
```html
... Flow is set to obj.flow ...
I have uploaded files: #{{obj.flow.files.length}}
```
```javascript
$scope.obj = {}; // variable "obj" must be initialized on the scope
```
# 如何以已有的流对象初始化流?
使用 `flow-object` 属性,并设置在范围上的现有流动对象.
```html
... Flow is initialized with existingFlowObject, no new Flow object is created ...
There are already {{ existingFLowObject.files.length }} files uploaded,
which is equal to {{ $flow.files.length }}.
```
# 我怎么支持更老的浏览器?
转到 [https://github.com/flowjs/fusty-flow.js (中文(简体) )](https://github.com/flowjs/fusty-flow.js) 并在配置中添加:
```javascript
var app = angular.module('app', ['flow'])
.config(['flowFactoryProvider', function (flowFactoryProvider) {
flowFactoryProvider.factory = fustyFlowFactory;
}]);
```
# 捐款
为确保源代码的一致性,请在工作时铭记这些规则:
- 所有特性或bug修正必须经过一个或多个规格的测试.
- 除下文所列的例外情况外,我们遵循载于第12条的规则 [Google 的 JavaScript 样式指南](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml)数字 :
- 以100个字符包起所有代码 .
- 而不是复杂的继承等级, 我们更喜欢简单的对象。 我们使用原型 只有在绝对必要时才能继承遗产.
## 常见问题
### @flowjs/ng-flow 是什么？
Flow\.js html5 文件上传扩展名于 angular\.js 框架
### 如何安装 @flowjs/ng-flow？
在项目目录运行 npm install @flowjs/ng-flow，或使用 pnpm add / yarn add / bun add。
### @flowjs/ng-flow 支持 TypeScript 吗？
该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/flowjs\_\_ng-flow 是否存在。
### @flowjs/ng-flow 支持 ESM 还是 CommonJS？
以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。
### @flowjs/ng-flow 可以商用吗？
@flowjs/ng-flow 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。
### @flowjs/ng-flow 的下载量有多少？
根据 npm 官方下载统计，@flowjs/ng-flow 在 2026/10/15 – 2026/11/13 这 30 天内被下载 14,840 次，日均约 495 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。
### @flowjs/ng-flow 还在维护吗？
最新版本 2\.7\.8 发布于 2018/03/18（8 年前）；至今共发布 4 个版本，其中过去 12 个月发布了 0 个；首次发布于 2016/01/26。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。