angularjs上传文件

PHPABC angularjs 1,045 次浏览 , 没有评论

Context

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

HTML

<a href="javascript:void(0)" class="upload-btn">     <img ng-src="{{assets}}/img/icon/camera_big.png" alt=""/>     <input type="file" ng-file-select="upload" name="file" id="file" accept="image/*"/> </a>

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('http://up.qiniu.com', 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的设置

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

Go