angularjs php上传文件 angularjs上传文件

Context

最近在做一个手机端的webapp，需要用到上传，粗略的看了一下网上的angularjs文件上传，大部分都是依赖其他插件，比如jQuery的上传插件，还有angular-file-upload，本人觉得完全没有必要。xmlhttprequest 2支持的formdata对象，完全可以胜任。

HTML

JS

这里采用的是客户端直传七牛云的方式，$rootScope 作用域需要设置 上传的token，具体格式为

$rootScope.upload = {

token:”上传token”,

cdn:”服务器地址”

};

上传指令

app.directive('ngFileSelect', ['$rootScope', '$http', function ($rootScope, $http) { return function (scope, ele, attr) { ele.bind('change', function (e) { //上传 var fn = attr.ngFileSelect;//回调方法，本例为$scope中的upload()方法 var file = e.target.files[0]; if (file == undefined) {//没选择文件 return false; } var form = new FormData(); form.append('token', $rootScope.upload.token);//设置上传token form.append("file", file); $rootScope.loading = true; $http.post('', form, { headers: { 'Content-Type': undefined//如果不设置Content-Type,默认为application/json,七牛会报错 } }).success(function (data) { $rootScope.loading = false; scope[fn]($rootScope.upload.cdn + data.key);//上传回调，将url传到upload方法中 }); }); }; }]);

scope[fn]($rootScope.upload.cdn + data.key);

解释一下，scope是作用域，fn是上面定义的属性ng-file-select=”upload“，而在作用域中我们手动定义了upload方法，该方法接受一个url作为参数，那么整句代码的意思就是，调用$scope.upload($rootScope.upload.cdn+data.key);

这样解释就很容易懂了

Upload方法

$scope.upload = function (url) { $scope.images.push(url); };

写在最后

本文是上传至七牛的配置，如果你是普通上传，只需要配置指令和回调方法即可，当然,Content-Type照样得设置为undefined，本文关键点在于scope[fn]的理解和Content-Type的设置