Question

I have a php script which outputs an image, how can I POST data to it and display the resulting image without refreshing the rest of the screen, so far I have got the code below which returns a png.

function go(){
$.post("test_image.php", $("frm").serialize(),
   function(data){
       //alert(data);//proves a png image is returned.
       //How do I now display the returned image (preferably to '$("#modified")')
   });
}

I can’t display the returned image.

Answer 1

You could take the resulting data and put it into a data: URI (more info here) but that won’t work in IE, is likely to be slow, is not cachable in any way and uses 33% more memory than necessary due to the base64 encoding.

The most elegant way would be for your script to write the image data to a file, and to return the URL of that new image.

Your Ajax callback could then do a simple

$("#myimage").src = data;