这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文通过三步骤给大家详细介绍了 JavaScript 将 base64 图片转换成 formData 并通过 AJAX 提交的实现方法,感兴趣的朋友一起看看吧
之前为了拍摄照片使用了 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);
- }
- });
来源: http://www.phperz.com/article/17/0521/330947.html