Upload image using ajax

Question

I know there are many tutorials, but I cannot figure out how to make them work.

I have an input form for uploading a file:

<input onChange="userPreviewImage(this)" type="file" accept="image/*" style="display:none"/> 

There is my javascript code

 function userPreviewImage (fileInput) { save = true; var files = fileInput.files; var file = files[0]; current = file; var imageType = /image.*/; var img = document.createElement("img"); img.classList.add("obj"); img.classList.add("preview"); img.file = file; var reader = new FileReader(); reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img); reader.readAsDataURL(file); } 

As a result, I have img , which is an <img src="data:image/png;base64..."> object that I can print.

I used this for a while, but now I need to change the workflow. Now my goal is instead of printing the image, sending its source to the server (server code is working fine). I can’t figure out how to get the image source from what I have (only the data:image/png;base64... ). Can someone give me some advice?

Answer 1

Try sending the data URI aImg to the server as a String

 window.onload = function () { this.userPreviewImage = function (fileInput) { var files = fileInput.files; var file = files[0]; var reader = new FileReader(); reader.onload = function (aImg) { $.post("/echo/html/", { html: aImg.target.result }) .then(function (data, textStatus, jqxhr) { console.log(data, textStatus); }, function(jqxhr, textStatus, errorThrown) { console.log(textStatus, errorThrown); }) }; reader.readAsDataURL(file); } }; 

jsfiddle http://jsfiddle.net/8gjb82b6/1/