web前端开发upload上传头像js示例代码


Posted in Javascript onOctober 22, 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>

更多精彩内容请参考专题《ajax上传技术汇总》,《javascript文件上传操作汇总》和《jQuery上传操作汇总》进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用json获取字符出现次数的代码
Mar 22 Javascript
javascript模块化是什么及其优缺点介绍
Sep 02 Javascript
js读写cookie实现一个底部广告浮层效果的两种方法
Dec 29 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
前端js弹出框组件使用方法
Aug 24 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
Mar 24 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
vuecli项目构建SSR服务端渲染的实现
Oct 30 Javascript
jQuery中$.ajax()方法参数解析
Oct 22 #Javascript
详解Javascript函数声明与递归调用
Oct 22 #Javascript
js中利用cookie实现记住密码功能
Aug 20 #Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 #Javascript
微信开发 消息推送实现代码
Oct 21 #Javascript
微信和qq时间格式模板实例详解
Oct 21 #Javascript
微信开发 微信授权详解
Oct 21 #Javascript
You might like
PHP内核探索:变量概述
2014/01/30 PHP
一个PHP实现的轻量级简单爬虫
2015/07/08 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
thinkphp5 框架结合plupload实现图片批量上传功能示例
2020/04/04 PHP
PHP中迭代器的简单实现及Yii框架中的迭代器实现方法示例
2020/04/26 PHP
跟随鼠标旋转的文字
2006/11/30 Javascript
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
浅析Cookie中的Path与domain
2013/12/18 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
2014/05/07 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
JavaScript使用yield模拟多线程的方法
2015/03/19 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
vue左侧菜单,树形图递归实现代码
2018/08/24 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
详解搭建一个vue-cli的移动端H5开发模板
2020/01/17 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
jQuery实现滑动开关效果
2020/08/02 jQuery
javascript中正则表达式语法详解
2020/08/07 Javascript
[01:08:57]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS LGD第二场
2014/05/24 DOTA
Python对象属性自动更新操作示例
2018/06/15 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
pytorch之inception_v3的实现案例
2020/01/06 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
python简单利用字典破解zip文件口令
2020/09/07 Python
加拿大时装零售商:Influence U
2018/12/22 全球购物
汽车驾驶求职信
2013/10/25 职场文书
超市工作总结范文2014
2014/12/19 职场文书
先进工作者事迹材料
2014/12/23 职场文书
幼儿园门卫安全责任书
2015/05/08 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
SpringBoot中HttpSessionListener的简单使用方式
2022/03/17 Java/Android