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


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 模式对话框终极版实现代码
Sep 28 Javascript
jQuery 源码分析笔记(7) Queue
Jun 19 Javascript
javascript事件函数中获得事件源的两种不错方法
Mar 17 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
jQuery标签编辑插件Tagit使用指南
Apr 21 Javascript
javascript编写贪吃蛇游戏
Jul 07 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
js将table的每个td的内容自动赋值给其title属性的方法
Oct 13 Javascript
vue2单元测试环境搭建
May 24 Javascript
vue根据进入的路由进行原路返回的方法
Sep 26 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
Jan 24 Javascript
javascript删除数组元素的七个方法示例
Sep 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
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
浅析php中如何在有限的内存中读取大文件
2013/07/02 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
js活用事件触发对象动作
2008/08/10 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
js面向对象编程之如何实现方法重载
2014/07/02 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
Java File类的常用方法总结
2015/03/18 Javascript
原创jQuery弹出层插件分享
2015/04/02 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
JavaScript知识点总结(四)之逻辑OR运算符详解
2016/05/31 Javascript
前端设计师们最常用的JS代码汇总
2016/09/25 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
Bootstrap按钮组实例详解
2017/07/03 Javascript
用Vue.extend构建消息提示组件的方法实例
2017/08/08 Javascript
Node.js简单入门前传
2017/08/21 Javascript
axios发送post请求springMVC接收不到参数的解决方法
2018/03/05 Javascript
npm scripts 使用指南详解
2018/10/08 Javascript
javascript中函数的写法实例代码详解
2018/10/28 Javascript
Python定时执行之Timer用法示例
2015/05/27 Python
Python之inspect模块实现获取加载模块路径的方法
2018/10/16 Python
python整合ffmpeg实现视频文件的批量转换
2019/05/31 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
英国领先的男士美容护发用品公司:Mankind
2016/08/31 全球购物
台湾旅游网站:灿星旅游
2018/10/11 全球购物
SIDESTEP荷兰:在线购买鞋子
2019/11/18 全球购物
英国高街奥特莱斯:Highstreet Outlet
2019/11/21 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
过滤器的用法
2013/10/08 面试题
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
2014年安全生产大检查方案
2014/05/13 职场文书
我的中国梦演讲稿1000字
2014/08/19 职场文书
小学生学习保证书
2015/02/26 职场文书
乡镇团代会开幕词
2016/03/04 职场文书