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

不念不忘少年蓝@ 2022-06-03 10:39 27阅读 0赞

首先：引入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="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