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


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 相关文章推荐
JsEasy简介 JsEasy是什么?与下载
Mar 07 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
js给dropdownlist添加选项的小例子
Mar 04 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
jquery 实现复选框的全选操作实例代码
Jan 24 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
详解webpack2异步加载套路
Sep 14 Javascript
详解基于vue-cli3快速发布一个fullpage组件
Mar 08 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
改变layer confirm弹窗按钮的颜色方法
Sep 12 Javascript
在vue中使用cookie记住用户上次选择的实例(本次例子中为下拉框)
Sep 11 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生成便于打印的网页
2006/10/09 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
codeigniter教程之多文件上传使用示例
2014/02/11 PHP
php分页函数完整实例代码
2014/09/22 PHP
php实现数据库的增删改查
2017/02/26 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
关于js类的定义
2011/06/28 Javascript
用JSON做数据传输格式中的一些问题总结
2011/12/21 Javascript
关于JS字符串函数String.replace()
2013/04/07 Javascript
Jquery.addClass始终无效原因分析
2013/09/08 Javascript
JQuery each()嵌套使用小结
2014/04/18 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
浅谈javascript的Touch事件
2015/09/27 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
基于Vuejs和Element的注册插件的编写方法
2017/07/03 Javascript
Vue之Watcher源码解析(2)
2017/07/19 Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
2017/12/28 Javascript
JS扩展String.prototype.format字符串拼接的功能
2018/03/09 Javascript
微信小程序日期选择器实例代码
2018/07/18 Javascript
Python教程之全局变量用法
2016/06/27 Python
详谈Pandas中iloc和loc以及ix的区别
2018/06/08 Python
PyQtGraph在pyqt中的应用及安装过程
2019/08/04 Python
python实现3D地图可视化
2020/03/25 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例
2020/12/16 Python
html5指南-4.使用Geolocation实现定位功能
2013/01/07 HTML / CSS
英国在线潜水商店:Simply Scuba
2019/03/25 全球购物
医学生实习自荐信
2013/10/01 职场文书
2014新年寄语
2014/01/20 职场文书
食品安全承诺书范文
2014/08/29 职场文书
国庆节标语大全
2014/10/08 职场文书
工作表扬信范文
2015/01/17 职场文书
催款函范文
2015/06/24 职场文书
python本地文件服务器实例教程
2021/05/02 Python