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 相关文章推荐
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
解决火狐浏览器下JS setTimeout函数不兼容失效不执行的方法
Nov 14 Javascript
script的async属性以非阻塞的模式加载脚本
Jan 15 Javascript
js实现图片上传并正常显示
Dec 19 Javascript
javascript HTML5 canvas实现打砖块游戏
Jun 18 Javascript
Node.js pipe实现源码解析
Aug 12 Javascript
详解vue-router 路由元信息
Sep 13 Javascript
微信小程序中吸底按钮适配iPhone X方案
Nov 29 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
webpack+vue+express(hot)热启动调试简单配置方法
Sep 19 Javascript
8个非常实用的Vue自定义指令
Dec 15 Vue.js
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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP三层结构(上) 简单三层结构
2010/07/04 PHP
jquery.cookie.js 操作cookie实现记住密码功能的实现代码
2011/04/27 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
获取今天,昨天,本周,上周,本月,上月时间(实例分享)
2017/01/04 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
详解如何在angular2中获取节点
2017/11/23 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
微信小程序日历/日期选择插件使用方法详解
2018/12/28 Javascript
在JavaScript中如何访问暂未存在的嵌套对象
2019/06/18 Javascript
layui使用form表单实现post请求页面跳转的方法
2019/09/14 Javascript
vue element-ui中table合计指定列求和实例
2020/11/02 Javascript
python批量修改文件后缀示例代码分享
2013/12/24 Python
python机器学习库常用汇总
2017/11/15 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
python os.path模块常用方法实例详解
2018/09/16 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
基于python实现计算两组数据P值
2020/07/10 Python
解决python pandas读取excel中多个不同sheet表格存在的问题
2020/07/14 Python
使用AJAX和Django获取数据的方法实例
2020/10/25 Python
纯css3实现走马灯效果
2014/12/26 HTML / CSS
使用canvas压缩图片上传的方法示例
2020/02/07 HTML / CSS
Nike法国官方网站:Nike.com FR
2018/07/22 全球购物
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
大学生自我鉴定
2013/12/08 职场文书
前台接待员岗位职责
2014/01/02 职场文书
城市轨道交通工程职业生涯规划书范文
2014/09/16 职场文书
个人股份转让协议书范本
2014/10/26 职场文书
个人事迹材料范文
2014/12/29 职场文书
Mysql官方性能测试工具mysqlslap的使用简介
2021/05/21 MySQL
JS数组方法some、every和find的使用详情
2021/10/05 Javascript