Download XMLHttpRequest JS Image

Question

I want to create a site that uploads an image through XMLHttpRequest (). (XMLHttpRequest because I want the user to represent% progressbar)

My code is:

var req = new XMLHttpRequest(); req.addEventListener("progress", onUpdateProgress, false); req.addEventListener("load", onTransferComplete, false); req.addEventListener("error", onTransferFailed, false); req.addEventListener("abort", onTransferFailed, false); req.open("GET", "image.png", true); req.send(); function onUpdateProgress(e) { if (e.lengthComputable) { var percent_complete = e.loaded/e.total; if (Math.round(percent_complete*200)>=20) { $("#progress").animate({ width: Math.round(percent_complete*100) }, 0); } } } function onTransferFailed(e) { alert("Something went wrong. Please try again."); } function onTransferComplete(e) { //Problem } 

My problem: I do not know how to show the image that is now uploaded. I hope someone can help me :) Thanks ...

Answer 1

This can be done using the UATA URI, but it is difficult to do in all existing browsers.

If the caching options are set correctly, you can download it twice: first use the AJAX request, then, after the image has been cached by the browser, at another time, using the usual image functions. The second time your image will not be retrieved from the server again, but the browser will use the cached file and display the image almost instantly.