沐吾

知识整理

angularjs之ng-file-upload上传头像

图片上传分为单张上传,多张上传,拖拽上传,裁剪上传

头像上传,上传后会更改头像

<img ng-src="{{personal.avatar}}" ngf-resize="{width: 46, height: 46, quality: .8, type: 'image/*',
 ratio: '1:2', centerCrop: true, pattern='*', restoreExif: false}" ngf-pattern="'image/*'"
     ngf-multiple="false" ngf-select="upload($file)">  
ng-src 为图片默认显示的路径 ngf-resize重新定义图片大小 quality为质量在0.1-1.0之间可选择 类型为图像类型格
式(如.jpg,.png,.gif *代表全部的类型) 照片比例大小为1:2(不懂什么用处)centerCrop为不符合图片大小中心
裁剪图像 pattern模式,形成图案的格式为全部
$scope.upload = function (file) {
  var name = file.$ngfName;  
  var newname = name.substr(-4);   //substr(-4)截取后四位
  var newName = new Date().getTime() + newname;
  Upload.rename(file, newName);  //重新命名
  console.log(file);
  Upload.upload({
    //服务端接收
    url: imgUrl +"/api/containers/avatars/upload",  //url服务器接收的路径 imgurl为一个地址
    //上传的同时带的参数
    data: {file: file}
  }).success(function () {
    $scope.personal.avator = newName;  
  }).error(function () {
    SweetAlert.swal("", "头像上传失败", "warning");
  });
};


阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zhaoqiaomua/article/details/76240488
个人分类: angular
想对作者说点什么? 我来说一句

angularjs实现上传图片并且预览

2017年04月18日 974KB 下载

没有更多推荐了,返回首页

不良信息举报

angularjs之ng-file-upload上传头像

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭