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


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 相关文章推荐
使用js获取QueryString的方法小结
Feb 28 Javascript
jquery创建一个新的节点对象(自定义结构/内容)的好方法
Jan 21 Javascript
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
js控制鼠标事件移动及移出效果显示
Oct 19 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
ztree获取选中节点时不能进入可视区域出现BUG如何解决
Dec 03 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
老生常谈js数据类型
Aug 03 Javascript
vue、react等单页面项目应该这样子部署到服务器
Jan 03 Javascript
JavaScript模块管理的简单实现方式详解
Jun 15 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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 变量类型的强制转换
2009/10/23 PHP
php file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
Apache启动报错No space left on device: AH00023该怎么解决
2015/10/16 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
javascript一个无懈可击的实例化XMLHttpRequest的方法
2010/10/13 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
全面介绍javascript实用技巧及单竖杠
2016/07/18 Javascript
fullCalendar中文API官方文档
2017/02/07 Javascript
jQuery实现图片滑动效果
2017/03/08 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
Mac下通过brew安装指定版本的nodejs教程
2018/05/17 NodeJs
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
使用pyecharts在jupyter notebook上绘图
2020/04/23 Python
django使用haystack调用Elasticsearch实现索引搜索
2019/07/24 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
Pytorch to(device)用法
2020/01/08 Python
翻转数列python实现,求前n项和,并能输出整个数列的案例
2020/05/03 Python
完美解决python针对hdfs上传和下载的问题
2020/06/05 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
美国汽车轮胎和轮毂销售网站:Tire Rack
2018/01/11 全球购物
吉尔德利巧克力公司:Ghirardelli Chocolate Company
2019/03/27 全球购物
高一物理教学反思
2014/01/24 职场文书
人事专员的岗位职责
2014/03/01 职场文书
社区工作者感言
2014/03/02 职场文书
尊师重教演讲稿
2014/09/04 职场文书
党建工作整改措施
2014/10/28 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
庆元旦主持词
2015/07/06 职场文书
体育教师教学随笔
2015/08/15 职场文书
小学生纪律委员竞选稿
2015/11/19 职场文书