JavaScript Base64 作为文件上传的实例代码解析
例如我们用某些 裁剪插件 得到的图片是
<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 作为文件上传的实例代码解析，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
相关推荐
-
Java中request对象常用方法汇总
本文主要介绍了Java中的request对象,并且对request对象中的一些常用方法作了一点总结,如果你是Java初学者,或许这篇文章对你会有所帮助. HttpServletRequest对象代表客户端的请求,当客户端通过HTTP协议访问服务器时,HTTP请求头中的所有信息都封装在这个对象中,开发人员通过这个对象的方法,可以获得客户这些信息. request常用方法: 一.获取客户机环境信息常见方法: 1.getRequestURL方法返回客户端发出请求时的完整URL. 2.getReques
-
java 单播、广播、组播详解及实例代码
java 单播.广播.组播详解及实例代码 在当前网络通信中(TCP/IP也不例外)有三种通信模式:单播.广播.组播(又叫多播, 个人感觉叫多播描述的有点不恰当),其中多播出现的时间最晚,但同时具备单播和广播的优点,最具有发展前景. 一.通信方式分类: 1.单播:单台主机与单台主机之间的通信: 2.广播:单台主机与网络中所有主机的通信: 3.组播:单台主机与选定的一组主机的通信: 二.单播: 单播是网络通信中最常见的,网络节点之间的通信 就好像是人们之间的对话一样.如果一个人对另外一个人说话
-
javaScript嗅探执行神器-sniffer.js
一.热身--先看实战代码 a.js 文件 // 定义Wall及内部方法 ;(function(window, FUNC, undefined){ var name = 'wall'; Wall.say = function(name){ console.log('I\'m '+ name +' !'); }; Wall.message = { getName : function(){ return name; }, setName : function(firstName, secondNam
-
Java中Equals使用方法汇总
这篇总结的形式是提出个问题,然后给出问题的答案.这是目前学习知识的一种尝试,可以让学习更有目的. Q1.什么时候应当重写对象的equals方法? 答:一般在我们需要进行值比较的时候,是需要重写对象的equals方法的.而例外情况在<effective java>的第7条"在改写equals的时候请遵守通用约定"中清楚描述了. 我们知道,在Java中,每个对象都继承于Object.如果不重写,则默认的equals代码如下所示: public boolean euqals(Ob
-
30条Java代码编写经验分享
成为一个优秀的Java程序员,有着良好的代码编写习惯是必不可少的.下面就让我们来看看代码编写的30条建议吧. (1) 类名首字母应该大写.字段.方法以及对象(句柄)的首字母应小写.对于所有标识符,其中包含的所有单词都应紧靠在一起,而且大写中间单词的首字母.例如: ThisIsAClassName thisIsMethodOrFieldName 若在定义中出现了常数初始化字符,则大写static final基本类型标识符中的所有字母.这样便可标志出它们属于编译期的常数. Java包(Package
-
JavaScript实现定时页面跳转功能示例
本文实例讲述了JavaScript实现定时页面跳转功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> &l
-
出现java.util.ConcurrentModificationException 问题及解决办法
java.util.ConcurrentModificationException 解决办法 前言: 在使用iterator.hasNext()操作迭代器的时候,如果此时迭代的对象发生改变,比如插入了新数据,或者有数据被删除. 则使用会报以下异常: Java.util.ConcurrentModificationException at java.util.HashMap$HashIterator.nextEntry(HashMap.java:793) at java.util.HashMap$
-
Java中\n和\r区别
符号 ASCII码 意义 \n 10 换行NL \r 13 回车CR 回车 \r 本义是光标重新回到本行开头,r的英文return,控制字符可以写成CR,即Carriage Return 换行 \n 本义是光标往下一行(不一定到下一行行首),n的英文newline,控制字符可以写成LF,即Line Feed 在不同的操作系统这几个字符表现不同,比如在WIN系统
-
java Class.getSimpleName() 详解及用法
java Class.getSimpleName() 的用法 Usage in android: private static final String TAG = DemoApplication.class.getSimpleName(); 实例代码: public class sample{ public static void main(String[] args){ //得到类的简写名称 System.out.println(sample.class.getSimpleName());
-
Javascript下拉刷新的简单实现
本文实例为大家分享了Javascript下拉刷新的简单实现代码,供大家参考,具体内容如下 Html相关代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimu