JavaScript将base64图片转换成formData并通过AJAX提交的实现方法


Posted in Javascript onOctober 24, 2016

之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type=”file”的形式。想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交。

第一步,将base64转换成二进制图片(Blob)

主要思路是整理一下base64的前面几个字符,预处理以后转换成Blob对象,这个之后稍作处理可以放在formData中。

function dataURItoBlob(base64Data) {
var byteString;
if (base64Data.split(',')[0].indexOf('base64') >= 0)
byteString = atob(base64Data.split(',')[1]);
else
byteString = unescape(base64Data.split(',')[1]);
var mimeString = base64Data.split(',')[0].split(':')[1].split(';')[0];
var ia = new Uint8Array(byteString.length);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ia], {type:mimeString});
}

第二步,构建formData

这里需要借助html5的canvas

var blob = dataURItoBlob(imageBase64); // 上一步中的函数
var canvas = document.createElement('canvas');
var dataURL = canvas.toDataURL('image/jpeg', 0.5);
var fd = new FormData(document.forms[0]);
fd.append("the_file", blob, 'image.png');

上面的the_file为这个文件的key,等效于input中的name,image.png则是文件名,由于base64的图片信息是不带文件名的,所以可以手动指定一个,这个参数是可选的

第三步,使用AJAX提交

为方便,这里使用jQuery的Ajax来演示,上面我们已经构建好了名为fd的formData,直接提交即可

$.ajax({
url: 'http://www.example.com/upload',
method: 'POST',
processData: false, // 必须
contentType: false, // 必须
dataType: 'json',
data: fd,
success(data) {
console.log(data);
}
});

以上所述是小编给大家介绍的JavaScript将base64图片转换成formData并通过AJAX提交的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JS 日期验证正则附asp日期格式化函数
Sep 11 Javascript
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
jQuery实现视频作为全屏幕背景
Dec 18 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
JS封装的三级联动菜单(使用时只需要一行js代码)
Oct 24 #Javascript
JavaScript reduce和reduceRight详解
Oct 24 #Javascript
js在ie下打开对话窗口的方法小结
Oct 24 #Javascript
浅谈AngularJs指令之scope属性详解
Oct 24 #Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 #Javascript
PHP捕捉异常中断的方法
Oct 24 #Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 #Javascript
You might like
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
PHP获取一年中每个星期的开始和结束日期的方法
2015/02/12 PHP
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
jQuery使用fadein方法实现渐出效果实例
2015/03/27 Javascript
在Node.js应用中使用Redis的方法简介
2015/06/24 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
JQuery EasyUI的使用
2016/02/24 Javascript
详解微信小程序Radio选中样式切换
2017/07/06 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
Vue包大小优化的实现(从1.72M到94K)
2021/02/18 Vue.js
使用Python判断IP地址合法性的方法实例
2014/03/13 Python
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
Python数据分析之如何利用pandas查询数据示例代码
2017/09/01 Python
使用django-crontab实现定时任务的示例
2018/02/26 Python
Django中使用Whoosh进行全文检索的方法
2019/03/31 Python
使用pytorch和torchtext进行文本分类的实例
2020/01/08 Python
tensorflow实现将ckpt转pb文件的方法
2020/04/22 Python
python实现坦克大战
2020/04/24 Python
Python基于Tkinter编写crc校验工具
2020/05/06 Python
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
韩国流行时尚女装网站:Dintchina(中文)
2018/07/19 全球购物
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
大学生毕业求职简历的自我评价
2013/10/24 职场文书
预备党员思想汇报范文
2013/12/29 职场文书
机电专业大学生职业规划书范文
2014/02/25 职场文书
学习2014年全国两会心得体会
2014/03/12 职场文书
给全校老师的建议书
2014/03/13 职场文书
2014年法院个人工作总结
2014/12/17 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
高一军训感想
2015/08/07 职场文书
人生一定要学会的三样东西:放下、忘记、珍惜
2019/08/21 职场文书
聊聊redis-dump工具安装问题
2022/01/18 Redis