angularjs 的可拆剪的上传头像 up-file-upload

首先：引入1.<script type="text/javascript" src="js/lib/ng-file-upload-shim.min.js"></script>
2.<script type="text/javascript" src="js/lib/ng-file-upload.min.js"></script>
3.<script type="text/javascript" src="js/lib/ng-img-crop.js" ></script>

然后：var app = angular.module("xxj", ["ngRoute", "mobile-angular-ui", 'ui.bootstrap', "xxService", "xxDirective", "xxFilter",'ngFileUpload', 'ngImgCrop']); //[]表示注入模块

在html页面：

<div class=" per_photo">
<div class="photo_cover"></div>
<div class="photo_change" ui-turn-on="openChangePictureModal">
</div>
<img ng-src="{{myUserInfo.icon | xxFile : '/aa' : fileServerPath}}" class="img-circle" style="width: 100%;height: 100%;" />
</div>

<!-- 模态框（Modal）头像 -->
<div class="modal demo_modal" id="picModal5" tabindex="-1" role="dialog" aria-labelledby="picModal5" aria-hidden="true" ui-if="openChangePictureModal" ui-state="openChangePictureModal">
<div class="modal-dialog">
<div class="modal-content demo_con1">
<div class="modal-header demo_heder">
<button type="button" class="close demo_close" data-dismiss="modal" aria-hidden="true" ui-turn-off="openChangePictureModal">&times;</button>
<h3 class="modal-title demo_title" align="center">修改头像</h3>
</div>
<div class="modal-body demo_body">
<form class="form-horizontal" name="myForm">
<div class="sel_pic">
<img src='../../img/icon/choosepicture.png' />
<button class="sel_btn" ngf-select ng-model="file" accept="image/*">选择图片</button>
</div>
<div class="show_pic">
<div ngf-drop ng-model="file" ngf-pattern="image/*" class="cropArea cen_picture">
<img-crop image="file  | ngfDataUrl" result-image="uploadImg" ng-init="uploadImg=''">
</img-crop>
</div>
<div class="cen_picture pic1">
<img ng-src="{{uploadImg}}" />
</div>
<div class="cen_picture pic2">
<img ng-src="{{uploadImg}}" />
</div>
<div class="cen_picture pic3">
<img ng-src="{{uploadImg}}" />
</div>
</div>
<div class="pic_submit">
<button class="sub_btn1" ui-turn-off="openChangePictureModal">取消</button>
<button class="sub_btn" ng-click="upload(uploadImg, file.name)">保存</button>
</div>
</form>
</div>
</div>
</div>
</div>

然后js的是：//上传头像
var serachInfo = function() {
xxHttp.get("/cust/auth/user", false, function(payload) {
$rootScope.myUserInfo = payload;
});
}
serachInfo();


//获得文件服务器授权路径 
xxHttp.get("/cust/free/upload_file/sig", true, function(payload) {
$rootScope.UploadFileSig = payload;
}, {
targetFolder: 'aa'
});


//提交
$scope.modifyIcon = function(name) {
xxHttp.put("/cust/auth/user_modify", true, function(payload) {
$rootScope.msgbox({
title: "修改头像",
content: "修改成功.",
ok: function() {
serachInfo();
}
});
}, {
account: $rootScope.myUserInfo.account,
mobile: $rootScope.myUserInfo.mobile,
icon: name
})
};


//上传头像文件
$scope.upload = function(dataUrl, name) {
var suffix = name.substr(-5); //substr(-5)截取后五位
var newName = $rootScope.myUserInfo.id + new Date().getTime() + suffix;
Upload.upload({
//服务端接收
url: $rootScope.UploadFileSig,
//上传的文件
data: {
                file: Upload.dataUrltoBlob(dataUrl, newName)
            },
}).success(function(data, status, headers, config) {
$scope.modifyIcon(newName);
//上传成功
$scope.result = data;
//跳转回去
SharedState.turnOff("openChangePictureModal");
}).error(function(data, status, headers, config) {
//上传失败
$scope.errorMsg = status + ': ' + data;
});
};

详情请查看github的原版：https://github.com/danialfarid/ng-file-upload