JavaScript Base64 作为文件上传的实例代码解析


Posted in Javascript onFebruary 14, 2017

例如我们用某些 裁剪插件 得到的图片是 

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAkCAYAAABIdFAMAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAHhJREFUeNo8zjsOxCAMBFB/ KEAUFFR0Cbng3nQPw68ArZdAlOZppPFIBhH5EAB8b+Tlt9MYQ6i1BuqFaq1CKSVcxZ2Acs6406KUgpt5/ LCKuVgz5BDCSb13ZO99ZOdcZGvt4mJjzMVKqcha68iIePB86GAiOv8CDADlIUQBs7MD3wAAAABJRU5ErkJggg==">

这样的,那这样的文件怎样在from 表单上传(当然我是举例,大部分的裁剪插件都是有内置的)

首先需要 吧 base64 流转换成 blob 对象,文件对象都继承它。

函数如下:

function getBlobBydataURI(dataURI,type) { 
  var binary = atob(dataURI.split(',')[1]); 
  var array = []; 
  for(var i = 0; i < binary.length; i++) { 
    array.push(binary.charCodeAt(i)); 
  } 
  return new Blob([new Uint8Array(array)], {type:type }); 
}

那么剩下的就作为文件上传就ok

var $Blob= getBlobBydataURI(base64Data,'image/png'); 
var formData = new FormData(); 
formData.append("files", $Blob ,"file_"+Date.parse(new Date())+".png");

全部代码是这样子的:

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title>上传用例</title> 
  <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'> 
  <script type="text/javascript"> 
    /** 
     * 根据base64 内容 取得 bolb 
     * 
     * @param dataURI 
     * @returns Blob 
     */ 
    function getBlobBydataURI(dataURI,type) { 
      var binary = atob(dataURI.split(',')[1]); 
      var array = []; 
      for(var i = 0; i < binary.length; i++) { 
        array.push(binary.charCodeAt(i)); 
      } 
      return new Blob([new Uint8Array(array)], {type:type }); 
    } 
    /** 
     * 上传 
     */ 
    function upload(){ 
      //base64 转 blob 
      var $Blob= getBlobBydataURI(document.getElementsByTagName("img")[0].currentSrc,'image/jpeg'); 
      var formData = new FormData(); 
      formData.append("files", $Blob ,"file_"+Date.parse(new Date())+".jpeg"); 
      //组建XMLHttpRequest 上传文件 
      var request = new XMLHttpRequest(); 
      //上传连接地址 
      request.open("POST", "www.xxx.com"); 
      request.onreadystatechange=function() 
      { 
        if (request.readyState==4) 
        { 
          if(request.status==200){ 
            console.log("上传成功"); 
          }else{ 
            console.log("上传失败,检查上传地址是否正确"); 
          } 
        } 
      } 
      request.send(formData); 
    } 
  </script> 
</head> 
<body> 
<button onclick="upload()">上传测试</button> 
<br /> 
上传的图片: 
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAeAB4AAD/4QAiRXhpZgAATU0AKgAAAAgAAQESAAMAAAABAAEAAAAAAAD/2wBDABsSFBcUERsXFhceHBsgKEIrKCUlKFE6PTBCYFVlZF9VXVtqeJmBanGQc1tdhbWGkJ6jq62rZ4C8ybqmx5moq6T/wAALCABQADEBAREA/8QAGgAAAwADAQAAAAAAAAAAAAAAAwQFAAECBv/EADQQAAIBAwMCAgcGBwAAAAAAAAECAwAEEQUSITFBE1EVImFxgaHwBiMykbHRFEJDcoKiwf/aAAgBAQAAPwD0tc5AGc1MuftBYW7FfEMrDtGM/Ohp9pbNmUNHOgbo7qAP1p60vra8z4E6uR1HcfCmVrKHc3EdrBJNI2FUZNSIreXWR41w7xW38kSnBYebe/686o2ljaWwPgQxqemRyT8aO8UTqVeJWHkQKlzaHDuaS0Y28/VSh9X3EeX17KNpWoPc+Lb3KBLiDhwOhHmKo5qPqY9Iajb6eM+Go8aX2jsK71dmhW2tIcxrcSCNivUKeuKnw2mnyXc1rbJcRzxAnxd/UijwajdXkVlbrIqSXCsXkA5wCRx7eDQ7i4i024KxXV3PMuGKytlD8vLP5UfUHCXunaimVEuEYDqQeRVmpthg61qjHqPDH+p/anL+0F1Eu1gskbB42Izhh0pA2mqSho3a1h38PLGvrMK3Ppj24tpbHBktl2hWON47/Hmg3FnPduxbThbyyDa0xlDBR34HsouvRCLSIYlOdjoo+FP+tU6+b0Zq63pH3E6iOU4/Cex+VWI5FkUMrAg9CO9BvEnlgZLaURy54YjOKniy1sHPpKM/4D9qqqWCgOctgZ46mpN4w1HWLe1TlLY+LIfb2FWKHPBHcxtHKgZWGCCKi2y3FnqbWdlJ40CgM6yf0xnoD9frV+sqPrt1eWsG6EbIzgNL3XnsPr/tOaXZQWduFhbfv9ZnPVj503trrApeG0hgllkiTa0xzIck5P0TTGKzFDmhjnieKRdyOMMOmayGJIYkijXaqDCjOcCi1ql5ruGGQRt4hcjdhI2fj4A1w2oQqMsJ1Hm1vIB+eKJLdRQuElbYCMh24X3Z86WXWLJtv3yDchfl14x2PPWmra4juYEmiIKsM9c49nvo9aqXdyPHf+LGWXbHsObeSQdc8YwPnS5vnvrdgk6uN2DttJOx8wTinJ3dZFmhuCrSIQscqHacc5x1HGaQWYiaFI2UoYWCsLSX8ORwBu5B8/3qrpxJs4zuRlx6hQEAr24PNN1qlXhlnkKykCDPCLzv/uPl7Pn2ocVm8UZKSBJd7MGAyCCxIBHfrW/4eaa4Es2xQIigCknDE8noOwFci0mjeAwyIPCgMW5lJycr2yPI96ZtIBbWscAbdsUDPnR6/9k=" /> 
</body> 
</html>

以上所述是小编给大家介绍的JavaScript Base64 作为文件上传的实例代码解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
jquery 打开窗口返回值实现代码
Mar 04 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
Mar 14 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
javascript url几种编码方式详解
Jun 06 Javascript
bootstrap laydate日期组件使用详解
Jan 04 Javascript
js保留两位小数方法总结
Jan 31 Javascript
React中阻止事件冒泡的问题详析
Apr 12 Javascript
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
Mar 20 jQuery
JavaScript实现定时页面跳转功能示例
Feb 14 #Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 #Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 #Javascript
Javascript下拉刷新的简单实现
Feb 14 #Javascript
Vue 短信验证码组件开发详解
Feb 14 #Javascript
JS去除字符串中空格的方法
Feb 14 #Javascript
Node.js与Sails redis组件的使用教程
Feb 14 #Javascript
You might like
PHP封装XML和JSON格式数据接口操作示例
2019/03/06 PHP
JavaScript开发时的五个注意事项
2007/12/08 Javascript
js表格分页实现代码
2009/09/18 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
2013/07/09 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
用AngularJS来实现监察表单按钮的禁用效果
2016/11/02 Javascript
JavaScript实现简单的四则运算计算器完整实例
2017/04/28 Javascript
JS引用传递与值传递的区别与用法分析
2018/06/01 Javascript
深入理解Vue父子组件生命周期执行顺序及钩子函数
2018/08/12 Javascript
Vuejs+vue-router打包+Nginx配置的实例
2018/09/20 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
JS使用cookie保存用户登录信息操作示例
2019/05/30 Javascript
原生js实现抽奖小游戏
2019/06/27 Javascript
vue使用nprogress加载路由进度条的方法
2020/06/04 Javascript
Python实现子类调用父类的方法
2014/11/10 Python
python数据结构之链表的实例讲解
2017/07/25 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
python selenium 对浏览器标签页进行关闭和切换的方法
2018/05/21 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
python多进程 主进程和子进程间共享和不共享全局变量实例
2020/04/25 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
解决Pycharm 中遇到Unresolved reference 'sklearn'的问题
2020/07/13 Python
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
巴西手表购物网站:eclock
2019/03/19 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
Servlet如何得到客户端机器的信息
2014/10/17 面试题
求职信写作要突出重点
2014/01/01 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
幼儿教师小班个人总结
2015/02/05 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
大学生党课感想
2015/08/11 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
实操Python爬取觅知网素材图片示例
2021/11/27 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS