JavaScript converts a base64 image to formData and submits it through AJAX.

JavaScript converts a base64 image to formData and submits it through AJAX.

Previously, we used the webcam plug-in to take a photo. After taking the photo, we got an image in base64 format. It's okay to directly display it. Just specify it in src, however, the problem arises when uploading data to the server. The server receives standard files, that is, type = "file" in html form. If you want to use this interface without changing the server code, you can directly convert base64 to the standard fomeData and submit it through AJAX.

Step 1: Convert base64 into a binary image (Blob)

The main idea is to sort out the first few characters of base64 and convert them into Blob objects after preprocessing. A little later processing can be placed in formData.

function dataURItoBlob(base64Data) {var byteString;if (base64Data.split(',')[0].indexOf('base64') >= 0)byteString = atob(base64Data.split(',')[1]);elsebyteString = 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});}

Step 2: Build formData

Use the canvas of html5

Var blob = dataURItoBlob (imageBase64); // The var canvas = document function in the previous step. 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 corresponding the_fileis the key of the file, which is equivalent to the namein input. image.png is the file name. Because base64 image information does not contain the file name, you can manually specify one. This parameter is optional.

Step 3: Use AJAX to submit

For convenience, here we use jQuery's Ajax for demonstration. We have built a formData file named fd and can submit it directly.

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

The above section describes how to convert a base64 image into a formData file using JavaScript and submit it using AJAX. I hope it will be helpful to you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!