post base64 encode image to server using javascript

Question

upload image to server ,image is from ,then i want to post image to server through ajax, server side using python flask framework, it needs base64 encoding format ,the question is how can i use javascript to convert image to base64 format.

	$('.img-upload-btn').click(function(event) {
		$("#img-upload").click();
	});

	$('#img-upload').on('change', function(event) {
		event.preventDefault();
		var img = $("#img-upload")[0].files[0];
		console.log(toDataUrl(img.name));

		var img_data = {
			"spec_id": 212,
			"file": img
		};
		console.log(img);
		$.ajax({
			url: 'http://10.0.0.75:5000/api/check_specification',
			type: 'POST',
			dataType: 'json',
			contentType: "application/json; charset=utf-8",
			success: function(data) {
				alert(data);
			},

			failure:function(errorMsg) {
				alert(errorMsg);
			}
		});
		
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-search full-width img-upload-btn">upload-img</button>
<input type="file" id="img-upload" >

Possible duplicate of How can you encode a string to Base64 in JavaScript? — Sami Kuhmonen
– Sami Kuhmonen, Commented Mar 3, 2017 at 7:31

Игорь Демянюк · Accepted Answer · 2017-03-10 11:16:50Z

6

Something like this you can get image in base64.

fileChange(e) {
    /* any way to get the object input */
    var file    = document.querySelector('input[type=file]');
    let reader = new FileReader();
    if(file.files[0]) {
        reader.onload = () => {
        imgBase64 = reader.result;
        console.log(reader.result);
        //your request
      }
      reader.readAsDataURL(file[0]);
    }
}

answered Mar 10, 2017 at 11:16

Игорь Демянюк

1,22712 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

post base64 encode image to server using javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related