浅析上传头像示例及其注意事项


Posted in Javascript onDecember 14, 2016

这次分享一个简易的上传头像示例,其大致流程为:

一、将选择的图片转为base64字符串

function preview(file) {//预览图片得到图片base64
    var prevDiv = document.getElementById('preview');
    if (file.files && file.files[0]) {
      var reader = new FileReader();
      reader.onload = function(evt){
        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
      }
      reader.readAsDataURL(file.files[0]);
    } else {
      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
  }

上面的方法可将选择的图片转为base64预览,此时可以打桩看看base64到底是什么东东。

二、根据(阿里云)上传要求,对该图像base64去头等处理

var binaryblob = function (s, type) {//blob对象
          var byteString = atob(s);
          var array = [];
          for (var i = 0; i < byteString.length; i++) {
            array.push(byteString.charCodeAt(i));
          }
          return new Blob([new Int8Array(array)], {type: type});
        };
var binaryPictureBlob = function (dataUrl, filterHead) {//上传base64去头
          var s = filterHead ? dataUrl.replace(/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png);base64,/, "") : dataUrl;
          return binaryblob(s, "image/jpeg");
        };

此时将base64去头等处理后返回一个blob对象用于上传阿里云。以上方法最好写在service、factory里,以后有图像上传需求时方便直接调用,尽量不要写在controller内。

三、第一次请求

$scope.save=function(){//保存
  var pic=binaryPictureBlob($('#preview img').attr('src'),true);//调用该方法得到上传数据
  console.log(pic);
  $http({//接口参数
    url:'',
    method:'',
    headers:{},
    data:{}
  }).success(function(data){
    console.log(data);


//这里讲进行第二次请求
  }).error(function(err1,header1,config1,status1){//处理响应失败
    console.log(err1,header1,config1,status1);
  })
}

点击保存按钮后第一次请求是上传到本地服务器,实际是上传一些该图像的标记等信息。上传成功后会返回一个该图像对应的阿里云地址和一个阿里云上传图像的地址,此时该图像地址暂不可用。

四、第二次请求

$http({
  method:'PUT',
  url:data.UrlForPut,
  headers: {
    'Content-Type':' ',
  },
  data:pic//图像base64字符串去头等处理后的图片信息blob
}).success(function(data2){
  $scope.imgSrc=data.Url;//将服务器的数据的url赋值图片链接
}).error(function(err2,header2,config2,status2){//处理响应失败
  console.log(err2,header2,config2,status2);
});

注意:

  • 此时请求的url是第一次请求返回的一个固定地址(我这里是--data.UrlForPut)。
  • 头部信息处避免阿里云上传时报错写成'Content-Type':' '或者根据阿里云要求上传header。
  • 第二次请求成功后图片的地址是第一次返回的该图像的地址(此处是个大坑,data.Url不要写成data2.Url了)。

五、此时应该都ok了,好好欣赏靓照吧!

最后附上完整代码,望指教!

友情提示:在复制代码测试时请求参数自己加上哦!

<!DOCTYPE html>
<html ng-app="webPhotos">
<head lang="zh-CN">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>photos</title>
  <style>
    div{text-align:center;border:1px solid #ddd;}
    button,div{margin:10px auto}
    button{border:0;width:200px;height:30px;line-height:30px;font-size:1pc;color:#333;background-color:#0ff;cursor:pointer;border-radius:5px}
    button:hover{background-color:#db7093}
    #preview,.show-img{width:200px;height:200px;}
    #preview img,.show-img img{width:100%;height:100%;}
    .file{position:relative;display:block;width:200px;height:30px;line-height:30px;background:#9acd32;border-radius:5px;margin:10px auto;overflow:hidden;color:#1e88c7;text-decoration:none;text-indent:0}
    .file input{position:absolute;font-size:75pt;right:0;top:0;opacity:0}
    .file:hover{background:#aadffd;border-color:#78c3f3;color:#004974;text-decoration:none}
  </style>
</head>
<body>
<div ng-controller="photos">
  <a href="javascript:;" class="file">
    <span>选择文件</span>
    <input type="file" onchange="preview(this)" />
  </a>
  <button class="save" ng-click="save()">保存</button>
  <h2>头像预览</h2>
  <div id="preview"></div>
  <h2>上传成功后展示头像</h2>
  <div class="show-img">
    <img ng-src={{imgSrc}} alt=""/>
  </div>
</div>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
<script>
  function preview(file) {//预览图片得到图片base64
    var prevDiv = document.getElementById('preview');
    if (file.files && file.files[0]) {
      var reader = new FileReader();
      reader.onload = function(evt){
        prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
      }
      reader.readAsDataURL(file.files[0]);
    } else {
      prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
    }
  }
  //以上代码最好写在service或factory里
  angular.module('webPhotos',['ng'])
      .controller('photos',function($scope,$http){
        var binaryblob = function (s, type) {//blob对象
          var byteString = atob(s);
          var array = [];
          for (var i = 0; i < byteString.length; i++) {
            array.push(byteString.charCodeAt(i));
          }
          return new Blob([new Int8Array(array)], {type: type});
        };
        var binaryPictureBlob = function (dataUrl, filterHead) {//上传base64去头
          var s = filterHead ? dataUrl.replace(/^data:image\/(png|jpeg|pjpeg|bmp|gif|x-png);base64,/, "") : dataUrl;
          return binaryblob(s, "image/jpeg");
        };
        $scope.save=function(){//保存
          var pic=binaryPictureBlob($('#preview img').attr('src'),true);//调用该方法得到上传数据
          $http({//接口参数
            url:'',
            method:'',
            headers:{},
            data:{}
          }).success(function(data){//此时上传到本地服务器成功,实际上只是上传了与此图片有关的标记,图片信息还未上传
            $http({
              method:'PUT',
              url:data.UrlForPut,//上传到本地服务器已经生成地址,但要上传到阿里云后地址才生效有上传的图像显示
              headers: {
                'Content-Type':' ',//避免阿里云上传时报错或者根据阿里云要求上传header
              },
              data:pic//图像base64字符串去头等处理后的图片信息
            }).success(function(data2){//将图像信息从服务器上传到阿里云
              $scope.imgSrc=data.Url;//将服务器的数据的url赋值图片链接
            }).error(function(err2,header2,config2,status2){//处理响应失败
              console.log(err2,header2,config2,status2);
            });
          }).error(function(err1,header1,config1,status1){//处理响应失败
            console.log(err1,header1,config1,status1);
          })
        }
      })
</script>
</body>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
一个基于jquery的图片切换效果
Jul 06 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 Javascript
Jquery实现控件的隐藏和显示实例
Feb 08 Javascript
基于jQuery实现网页进度显示插件
Mar 04 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
Angularjs全局变量被作用域监听的正确姿势
Feb 06 Javascript
论JavaScript模块化编程
Mar 07 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
Mar 20 Javascript
Vue实现base64编码图片间的切换功能
Dec 04 Javascript
vue使用nprogress实现进度条
Dec 09 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
Dec 14 #Javascript
jQuery 常见小例汇总
Dec 14 #Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 #Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 #Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 #Javascript
实例解析angularjs的filter过滤器
Dec 14 #Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 #Javascript
You might like
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
检测jQuery.js是否已加载的判断代码
2011/05/20 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
纯js实现遮罩层效果原理分析
2014/05/27 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
判断字符串的长度(优化版)中文占两个字符
2014/10/30 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
js实现楼层效果的简单实例
2016/07/15 Javascript
javascript中的后退和刷新实现方法
2016/11/10 Javascript
vue中动态绑定表单元素的属性方法
2018/02/23 Javascript
详解React中setState回调函数
2018/06/14 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
Python编程之序列操作实例详解
2017/07/22 Python
python使用MQTT给硬件传输图片的实现方法
2019/05/05 Python
tensorboard 可以显示graph,却不能显示scalar的解决方式
2020/02/15 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
Python 读取WAV音频文件 画频谱的实例
2020/03/14 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
Omio英国:搜索并比较便宜的巴士、火车和飞机
2019/08/27 全球购物
创业大赛策划书
2014/03/01 职场文书
销售经理岗位职责
2014/03/16 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
六年级学生期末评语
2014/12/26 职场文书
离婚协议书样本
2015/01/26 职场文书