UDN-企业互联网技术人气社区

板块导航

浏览  : 2245
回复  : 3

[HTML5] H5移动端头像上传控件(支持移动和缩放)

[复制链接]
小辫儿的头像 楼主
发表于 2017-2-7 10:39:55 | 显示全部楼层 |阅读模式
1.png

  avatarUpload (移动端头像上传控件)

  github仓库地址: avatarUpload (欢迎纠正)

  devDependencies

  devDependencies:{"jquery3.1.1-min","hammer.min"}

  hammer主要用于图片的移动和缩放

  使用方法

  配置信息:
  1. var options = {
  2.     containerId: "#pictureUpload",
  3.     uploadBgId: "#pictureUpload-bg",
  4.     fileId: "#fileElem",
  5.   canvasId: "#canvas",
  6.     //容器尺寸
  7.   container: {
  8.         width: $("#pictureUpload").width(),
  9.         height: $("#pictureUpload").height()
  10.     },
  11.   //裁剪区域尺寸
  12.   clip:{
  13.         width: $("#pictureUpload-mask").width(),
  14.         height: $("#pictureUpload-mask").height()
  15.     },
  16.   //图片质量0-1   
  17.   imgQuality:1
  18. }
复制代码

  相关操作:
  1. //获取操作对象
  2. var txUpload = avatarUpload(options);
  3. //文件 onchange事件
  4. $("#fileElem").on("change",  function(){
  5.     txUpload.handleFiles(function(){
  6.     //当用户选择文件后 按钮active
  7.     $("#preview, #submit, #createLocalImg").addClass('active');
  8.     })
  9. });
  10. //选择文件
  11. $("#select").click(txUpload.selectImg)
  12. //预览
  13. $("#preview").click(txUpload.createImg)
  14. //上传
  15. $("#submit").click(function(){
  16.     txUpload.submit(sendFile);
  17. })
  18. //生成本地文件
  19. $("#createLocalImg").click(function(){
  20.     txUpload.createLocalImg("localImg","canvasWrap","localImg");
  21. });
复制代码

  图片上传的函数:
  1. //定义上传的函数

  2. function sendFile(fileblob) {
  3.     console.log(fileblob)
  4.     var url = "/";
  5.     var xhr = new XMLHttpRequest();
  6.     var fd = new FormData();

  7.     fd.append("file", fileblob,"avatar.jpg");

  8.     xhr.open("POST", url, true);
  9.     xhr.onreadystatechange = function() {
  10.         if (xhr.readyState == 4 && xhr.status == 200) {
  11.             var data = JSON.parse(xhr.responseText)
  12.             if(data.success){
  13.                 console.log("成功");
  14.             }
  15.         }
  16.     };
  17.     xhr.send(fd);
  18. }
复制代码

  兼容性

  支持URL.createObjectURL都兼容

  技术参考 FileReader HTMLCanvasElement.toBlob

相关帖子

发表于 2017-2-7 10:40:33 | 显示全部楼层
我完全是被标题<<H5移动端头像上传控件(支持移动和缩放)>>吸引过来的
使用道具 举报

回复

发表于 2017-2-7 16:08:53 | 显示全部楼层
LZ敢整点更有创意的不?兄弟们等着围观捏~
使用道具 举报

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部