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 相关文章推荐
JavaScript游戏之优化篇
Nov 08 Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
Jquery异步提交表单代码分享
Mar 26 Javascript
js实现表单检测及表单提示的方法
Aug 14 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
ajax接收后台数据在html页面显示
Feb 19 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
Aug 24 Javascript
js实现轮播图特效
May 28 Javascript
jQuery实现可以扩展的日历
Dec 01 jQuery
原生JavaScript实现换肤
Feb 19 Javascript
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
php数组查找函数总结
2014/11/18 PHP
使用PHP连接数据库_实现用户数据的增删改查的整体操作示例
2017/09/01 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
禁止页面刷新让F5快捷键及右键都无效
2014/01/22 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
2014/09/01 Javascript
js中的json对象详细介绍
2014/10/29 Javascript
Node.js中用D3.js的方法示例
2017/01/16 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
详解webpack分包及异步加载套路
2017/06/29 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
JS简单实现数组去重的方法分析
2017/10/14 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
2017/10/24 Javascript
node.js+express+mySQL+ejs+bootstrop实现网站登录注册功能
2018/01/12 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
在nuxt中使用路由重定向的实例
2020/11/06 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
Python图片裁剪实例代码(如头像裁剪)
2017/06/21 Python
python实现闹钟定时播放音乐功能
2018/01/25 Python
python利用requests库进行接口测试的方法详解
2018/07/06 Python
一篇文章弄懂Python中所有数组数据类型
2019/06/23 Python
python爬虫中多线程的使用详解
2019/09/23 Python
修改Pandas的行或列的名字(重命名)
2019/12/18 Python
Python小白垃圾回收机制入门
2020/06/09 Python
Python远程linux执行命令实现
2020/11/11 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
全网最详细的PyCharm+Anaconda的安装过程图解
2021/01/25 Python
一年级学生评语大全
2014/04/21 职场文书
法学院毕业生求职信
2014/06/25 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
神秘岛读书笔记
2015/07/01 职场文书
2016党员干部廉政准则学习心得体会
2016/01/20 职场文书
《山中访友》教学反思
2016/02/24 职场文书