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获取HTML静态页面参数传递值示例
Aug 18 Javascript
js判断iframe内的网页是否滚动到底部触发事件
Mar 18 Javascript
javascript中call,apply,bind的用法对比分析
Feb 12 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
AngularJs bootstrap搭载前台框架——基础页面
Sep 01 Javascript
微信小程序开发实战教程之手势解锁
Nov 18 Javascript
深入理解JavaScript中的预解析
Jan 04 Javascript
ES6新数据结构Set与WeakSet用法分析
Mar 31 Javascript
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
Mar 07 Javascript
jQuery zTree树插件的使用教程
Aug 16 jQuery
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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
全国FM电台频率大全 - 10 江苏省
2020/03/11 无线电
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
微信支付的开发流程详解
2016/09/13 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
js查找父节点的简单方法
2008/06/28 Javascript
不要小看注释掉的JS 引起的安全问题
2008/12/27 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
js实现iGoogleDivDrag模块拖动层拖动特效的方法
2015/03/04 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
2018/01/03 Javascript
Vue中的异步组件函数实现代码
2018/07/20 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
浅谈TypeScript的类型保护机制
2020/02/23 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
[03:28]2014DOTA2国际邀请赛 EG战队官方纪录片
2014/07/21 DOTA
[49:21]TNC vs VG 2019DOTA2国际邀请赛淘汰赛 胜者组赛BO3 第三场 8.20.mp4
2019/08/22 DOTA
python数据结构之二叉树的建立实例
2014/04/29 Python
Python的Django REST框架中的序列化及请求和返回
2016/04/11 Python
python 日志增量抓取实现方法
2018/04/28 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
python使用paramiko模块通过ssh2协议对交换机进行配置的方法
2019/07/25 Python
Python实现时间序列可视化的方法
2019/08/06 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
基于python获取本地时间并转换时间戳和日期格式
2020/10/27 Python
pandas按照列的值排序(某一列或者多列)
2020/12/13 Python
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
前台接待员岗位职责
2014/01/02 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
2016年元旦主持词
2015/07/06 职场文书
话题作文之呼唤
2019/12/18 职场文书
Nginx部署vue项目和配置代理的问题解析
2021/08/04 Servers
redis数据结构之压缩列表
2022/03/21 Redis