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);
}
});

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

赞 (0)

相关推荐

  • Ajax+FormData+javascript实现无刷新表单信息提交

    原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var fd = new FormData(fm); //实例化对象 alert(fd); fd对象内部有收集的form表单域信息 ajax传递表单信息 1.静态显示页面代码 <!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="t

  • JS中使用FormData上传文件、图片的方法

    关于FormData XMLHttpRequest Level 2添加了一个新的接口  ---- FormData 利用FormData对象,可以通过js用一些键值对来模拟一系列表单控件,可以使用XMLHttpRequest的 send( ) 方法来异步提交表单与普通的ajax相比,使用FormData的最大优点就是可以异步上传二进制文件 FormData对象 FormData对象,可以把所有表单元素的name与value组成一个queryString,提交到后台. 在使用ajax提交时,使用F

  • JS FormData上传文件的设置方法

    使用FormData上传文件时,总是获取不到req.file对象.发现是没有配置对FormData导致. 这里我是在vue中使用axios发送的请求,配置代码如下.重点地方给出注释 <form id="uploadform" method="POST" enctype="multipart/form-data" :action="postImgApi" ref="uploadform"> <

  • js获取上传文件的绝对路径实现方法

    在html中 <input type="file" id="importFile" /> <input type="button" onclick="upload()"/> <script> function upload() { var filename = document.getElementById("importFile").value; // 这时的filen

  • jQuery Ajax使用FormData对象上传文件的方法

    jQuery Ajax使用FormData对象上传文件的方法

    FormData对象,是可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个"表单". 在 Mozilla Developer 网站 使用FormData对象 有详尽的FormData对象使用说明. 但上传文件部分只有底层的XMLHttpRequest对象发送上传请求,那么怎么通过jQuery的Ajax上传呢? 本文将介绍通过jQuery使用FormData对象上传文件. 使用<form>表单初始化FormData对象方式上传文件 HTM

  • 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法

    发请求有两种方式,一种是用ajax,另一种是用form提交,默认的form提交如果不做处理的话,会使页面重定向.以一个简单的demo做说明: html如下所示,请求的路径action为"upload",其它的不做任何处理: <form method="POST" action="upload" enctype="multipart/form-data"> 名字 <input type="text&q

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

    之前为了拍摄照片使用了webcam相关的插件,其拍摄后得到的是base64格式的图片,直接显示没问题,在src中直接指定就可以了,但是要上传到server时问题就来了,server端接收的是标准的文件,也就是html form中type="file"的形式.想要沿用这个接口不更改server端代码,于是尝试将base64直接转换成标准的fomeData并通过AJAX提交. 第一步,将base64转换成二进制图片(Blob) 主要思路是整理一下base64的前面几个字符,预处理以后转换成

  • JS实现图片转换成base64的各种应用场景实例分析

    本文实例讲述了JS实现图片转换成base64的各种应用场景.分享给大家供大家参考,具体如下: 网络上有很多片介绍通过js将图片转换成base64的文章,之所以再写这篇文章的原因时发现没有找到系统的介绍的文章,有的介绍如何实现本地项目的图片转码,有的介绍如何实现网络资源的图片转化,但是系统介绍的少之又少,所以我就在这里将各种场景系统的介绍一下: 场景一:将用户本地上传的资源转化,即用户通过浏览器点击文件上传时,将图片资源转化成base64: <input type="file" i

  • JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析

    本文实例讲述了JavaScript+Canvas实现彩色图片转换成黑白图片的方法.分享给大家供大家参考,具体如下: 1.convertToGray() 在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布:彩色图片加载完成后,使用 drawImage() 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData()和 putColorData():最后为myImage指定彩色图片的路径. 2.getColorData(

  • Java实现将png格式图片转换成jpg格式图片的方法【测试可用】

    本文实例讲述了Java实现将png格式图片转换成jpg格式图片的方法.分享给大家供大家参考,具体如下: import java.awt.Color; import java.awt.image.BufferedImage; import java.io.File; import java.io.IOException; import javax.imageio.ImageIO; public class ConvertImageFile { public static void main(Str

  • php实现图片转换成ASCII码的方法

    本文实例讲述了php实现图片转换成ASCII码的方法.分享给大家供大家参考.具体如下: php图片转换成ASCII码,转换后可以直接通过字符串显示图片 <html> <head> <title>Ascii</title> <style> body{ line-height:0; font-size:1px; } </style> </head> <body> <?php $image = 'image.j

  • JavaScript实现将xml转换成html table表格的方法

    本文实例讲述了JavaScript实现将xml转换成html table表格的方法.分享给大家供大家参考.具体如下: function ConvertToTable(targetNode) { // if the targetNode is xmlNode this line must be removed // i couldnt find a way to parse xml string to xml node // so i parse xml string to xml documen

  • python通过pil模块将raw图片转换成png图片的方法

    本文实例讲述了python通过pil模块将raw图片转换成png图片的方法.分享给大家供大家参考.具体分析如下: python通过pil模块将raw图片转换成png图片,pil中包含了fromstring函数可以按照指定模式读取图片信息然后进行保存. rawData = open("foo.raw" 'rb').read() imgSize = (x,y) # Use the PIL raw decoder to read the data. # the 'F;16' informs

  • JavaScript将当前时间转换成UTC标准时间的方法

    本文实例讲述了JavaScript将当前时间转换成UTC标准时间的方法.分享给大家供大家参考.具体如下: 这里使用JavaScript将当前时间转换成UTC标准时间,北京在东八区,在北京时间基础上减掉8小时 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to display the UTC date and time as a string. </p>

  • python使用reportlab实现图片转换成pdf的方法

    本文实例讲述了python使用reportlab实现图片转换成pdf的方法.分享给大家供大家参考.具体实现方法如下: #!/usr/bin/env python import os import sys from reportlab.lib.pagesizes import A4, landscape from reportlab.pdfgen import canvas f = sys.argv[1] filename = ''.join(f.split('/')[-1:])[:-4] f_j

  • JavaScript实现将UPC转换成ISBN的方法

    本文实例讲述了JavaScript实现将UPC转换成ISBN的方法.分享给大家供大家参考.具体实现方法如下: if (indexisbn.indexOf("978") == 0) { isbn = isbn.substr(3,9); var xsum = 0; var add = 0; var i = 0; for (i = 0; i < 9; i++) { add = isbn.substr(i,1); xsum += (10 - i) * add; } xsum %= 11;

随机推荐