关闭

angularjs之ng-file-upload上传头像

标签: 图片angular上传头像
933人阅读 评论(1) 收藏 举报
分类:

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

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

<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");
  });
};


0
0
查看评论

angularjs之手机端input图片上传(续)

为啥要写个续呢?解决一个问题:图片压缩BTW,本文是针对ajax提交,如果本身就是form表单提交就不需要看了。上一篇里说到h5可以用FileReader获取到图片信息,如base64,按道理这就可以传给服务端了,但是当图片很大的时候,这个字符串可能会写满好几张a4纸,这显然不合适,再者字符串太大服...
  • leebin_20
  • leebin_20
  • 2016-11-24 17:33
  • 448

angularjs之修改用户头像

修改用户头像逻辑 首先获取用户头像 然后上传头像 用户头像上传的地址,数据类型 上传后获取用户信息 将本地缓存的头像更改为用户的头像 获取用户头像 html部分 class="x_image"> ng-src="{{avator}}...
  • zhaoqiaomua
  • zhaoqiaomua
  • 2017-05-26 11:22
  • 660

【ionic&AngularJS】用户头像压缩上传,按比例缩小。

整合了网上angularjs关于头像上传,图片压缩以及文件传输的功能。
  • danding_ge
  • danding_ge
  • 2015-09-16 13:01
  • 4735

5款好用的开源JS图片裁剪插件(3个jQuery插件,2个AngularJS插件)

Jcrop是人气最高的图片裁剪jQuery插件,stars数量2k+,功能非常丰富,文档齐全,首选。Github.com官网也使用了这个插件。有一个小细节是,边框线的蚂蚁线是动画的,真的很用心。Cropper也是一款图片裁剪jQuery插件……
  • cuixiping
  • cuixiping
  • 2015-05-25 09:50
  • 65260

angularjs 上传图片 (一个真正可以上传的哦)

  • 2016-05-04 16:56
  • 1KB
  • 下载

angularJs中上传图片/文件功能:ng-file-upload

原文技术交流:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/angularjs-ng-file-upload/ 在做网站的过程中难免会遇到上传图片或者上传文件的功能,使用AngularJ实现的话可以用angularJs的ng...
  • csdnmmcl
  • csdnmmcl
  • 2016-04-01 09:07
  • 32605

ionic-基于javascript实现超级好用的移动端图像裁剪上传

在移动端的app中,经常都需要有一个功能,头像图片上传,在上传前可以进行裁剪,预览,最后再上传,虽然现在网上有很多开源的插件可以实现,但是最近腾讯开源的一个很好用的插件,就是应用于腾讯一系列产品的Alloyfinger。腾讯alloyteam团队http://www.alloyteam.com 下面...
  • u012979009
  • u012979009
  • 2016-11-22 15:56
  • 2855

ionic+angularJS+cordova(FileTransfer)上传图片【移动端】

【功能介绍】 在开发应用的时候,经常会遇到需要上传图片的功能,比如修改个人资料的头像。本文介绍的是基于ionic框架,在移动端上传图片的功能。 【功能流程】 (1)点击页面上的头像,弹出一个对话框,选择[拍照]或者[从相册选择]; (2)选取/拍摄照片; (3)上传照片...
  • hj7jay
  • hj7jay
  • 2016-10-09 20:40
  • 2250

上传头像js

1、用文件获取到图库 2、选择文件上传 3、把图片画出来 4、压缩图片 5、把路径变成base64 6、上传并获取
  • Angular_
  • Angular_
  • 2017-03-30 11:07
  • 423

ionic开发之用户头像修改-图片选择与上传

用户头像修改,图片选择上传,非常常用的功能,本来打算和wap版一样,也用XMLHttpRequest和FormData来处理图片异步上传,结果在手机上测试的时候发现,onload事件没有触发,没找到原因,本来想省点事才不用插件去实现这个功能的,这下看来只能用插件了。 准备 首先,这里需要用到...
  • qq_15602525
  • qq_15602525
  • 2016-09-28 15:42
  • 1300