angular文件上传php,Angular js 前端文件上传插件ng-flow入门

近期在使用Angular js开发混合式app，其中就需要开发文件上传功能，在网上查找了下，发现ng-flow口碑最好，而且github里面也有源代码，于是就决定用一用这个插件。

二话不多，首先下载github里面的资源包  ng-flow-master.zip,解压然后放在php环境下进行尝试，效果OK。于是就开始运用到项目中。

1、在前端页面引入js文件

和

这里的意思是 可以只引用 ng-flow-standalone.min.js这一个文件，或者 引用flow.min.js和ng-flow.min.js。其效果都是一样的。

Github中介绍了在前端页面中点击上传处格式需要规范

flow-files-submitted="$flow.upload()"

flow-file-success="$file.msg = $message">

Input OR Other element as upload button

Upload File

{{$index+1}}

{{file.name}}

{{file.msg}}

为了使用flow.js文件上传功能，需要在容器中 标识“flow-init”

... other flow directives goes here ...

这是上传文件时的按钮

Input OR Other element as upload button

Upload File

这段代码意思是上传成功后循环展示上传文件

{{$index+1}}{{file.name}}{{file.msg}}

然后在app.js中设置上传插件默认参数及上传事件

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;

}]);

在这里需要注意testChunks  在使用是需要置为false，我们也可以在调用的文件中直接默认置为false。因为默认配置为测试环境(true)，只传递参数不传递文件，这样在php端获取不到文件数据的。

我的具体配置：

flowFactoryProvider.defaults = {

target: 'http://127.0.0.1:84/Api/avatar',

permanentErrors: [404, 500, 501],

maxChunkRetries: 1,

chunkRetryInterval: 5000,

simultaneousUploads: 4,

testChunks: false, // 如果非测试块，则置为false，否则文件不会被传输到服务器

singleFile: true

};

返回文件存储路径 ，在app.js中其实可以定义多个事件。

在此我因为个人需求，只需要监听catchALl事件，具体为获取返回的图片存储路径，回调到前端显示

flowFactoryProvider.on('catchAll', function (event) {

// console.log('catchAll-yuanyang', arguments[0]);

var objectFlow = arguments;

if(objectFlow[0] == 'fileSuccess'){

var objFlow = arguments[2];

var data = JSON.parse(objFlow);

data = JSON.parse(data.body);

console.log(data.path);

document.getElementById('avatar').value = data.path;

};

});

在这里其实我们是能够抓取到文件上传过程中的所有状态的(像其他文件上传插件一样)，我们在此只对文件上传成功阶段做处理，两次转换json数据，获取文件路径。并赋值给特定ID。

另外注意：在提交表单数据时，请使用js重新获取图像数据，不然该字段不会被更新，就会保存缓存中的图片路径，这样是不可取的。

$scope.user.avatar = document.getElementById('avatar').value; //本操作必须存在

$data = $scope.user;

console.log($data);

$http({

url:ApiEndpoint.url + '/Api/editinfo',

method:"post",

data: $data,

headers:{'Content-Type': 'application/x-www-form-urlencoded'}

})

另外特别说明：php端接受文件就按照往常方式即可！在 “url:ApiEndpoint.url + '/Api/editinfo',”这个目标地址下写逻辑就行了。

心得：如果你也在使用Angular js ，那个在文件上传时使用ng-flow是个不错的选择，据文档介绍，其上传功能乃至性能都是不错的，可以说为html5文件上传而存在。我只是使用了其中很小一部分功能，窥见一毛。上手还是蛮快的，其他好用的功能还有待大家自己去发现、去分享。