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

Source: Internet
Author: User

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!

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.