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 相关文章推荐
许愿墙中用到的函数
Oct 07 Javascript
基于JQuery实现的类似购物商城的购物车
Dec 06 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
Oct 17 Javascript
JavaScript中的console.dir()函数介绍
Dec 29 Javascript
jquery实现对联广告的方法
Feb 05 Javascript
JavaScript实现的浮动层框架用法实例分析
Oct 10 Javascript
手机Web APP如何实现分享多平台功能
Aug 19 Javascript
微信小程序开发之数据存储 参数传递 数据缓存
Apr 13 Javascript
JS操作字符串转数字的常见方法示例
Oct 29 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 Javascript
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
打造计数器DIY三步曲(下)
2006/10/09 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
Zend Framework教程之Zend_Controller_Plugin插件用法详解
2016/03/07 PHP
Zend Framework教程之Application和Bootstrap用法详解
2016/03/10 PHP
Laravel多域名下字段验证的方法
2019/04/04 PHP
input输入框的自动匹配(原生代码)
2013/03/19 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
javascript操作字符串的原生方法
2014/12/22 Javascript
javascript运动详解
2015/07/06 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
常用的js方法合集
2017/03/10 Javascript
微信小程序实现倒计时60s获取验证码
2020/04/17 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
200行代码实现blockchain 区块链实例详解
2018/03/14 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
vue element和nuxt的使用技巧分享
2021/01/14 Vue.js
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
python针对excel的操作技巧
2018/03/13 Python
解决python中import文件夹下面py文件报错问题
2020/06/01 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
财务管理个人自荐书范文
2013/11/24 职场文书
客服服务心得体会
2013/12/30 职场文书
亲子拓展活动方案
2014/02/20 职场文书
计算机专业毕业生自荐信范文
2014/03/06 职场文书
庆祝国庆节演讲稿2014
2014/09/19 职场文书
离婚协议书范本(2014版)
2014/09/28 职场文书
2015年农村党员干部主题教育活动总结
2015/03/25 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
创业分两种人:那么哪些适合创业?,哪些适合不适合创业呢?
2019/08/23 职场文书