Retrieving image from database using Ajax

Question

I'm trying to read image from database with Ajax, but I could not read the xmlhttp.responseText to the img src. The image is saved as binary data in database and also retrieved as binary data. I'm using Ajax in JSP, because I want to give the user the ability to upload images and I will view the last uploaded image, on mouse over action the Ajax will be activated and get the image back, the problem is in reading the img from the response.

This is the Ajax function:

function ajaxFunction(path) {
    if (xmlhttp) { 
        var s = path;
        xmlhttp.open("GET", s, true); 
        xmlhttp.onreadystatechange = handleServerResponse;
        xmlhttp.send(null);
    }
}

function handleServerResponse() {
    if (xmlhttp.readyState == 4) {
        var Image = document.getElementById(Image_Element_Name);
        document.getElementById(Image_Element_Name).src = "data:" + xmlhttp.responseText;
    }
}

I also got exception in the server:

10415315 [TP-Processor1] WARN core.MsgContext  - Error sending end packet
java.net.SocketException: Broken pipe
    at java.net.SocketOutputStream.socketWrite0(Native Method)
    at java.net.SocketOutputStream.socketWrite(SocketOutputStream.java:92)
    at java.net.SocketOutputStream.write(SocketOutputStream.java:136)
    at org.apache.jk.common.ChannelSocket.send(ChannelSocket.java:537)
    at org.apache.jk.common.JkInputStream.endMessage(JkInputStream.java:127)
    at org.apache.jk.core.MsgContext.action(MsgContext.java:302)
    at org.apache.coyote.Response.action(Response.java:183)
    at org.apache.coyote.Response.finish(Response.java:305)
    at org.apache.catalina.connector.OutputBuffer.close(OutputBuffer.java:281)
    at org.apache.catalina.connector.Response.finishResponse(Response.java:478)
    at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:154)
    at org.apache.jk.server.JkCoyoteHandler.invoke(JkCoyoteHandler.java:200)
    at org.apache.jk.common.HandlerRequest.invoke(HandlerRequest.java:283)
    at org.apache.jk.common.ChannelSocket.invoke(ChannelSocket.java:773)
    at org.apache.jk.common.ChannelSocket.processConnection(ChannelSocket.java:703)
    at org.apache.jk.common.ChannelSocket$SocketConnection.runIt(ChannelSocket.java:895)
    at org.apache.tomcat.util.threads.ThreadPool$ControlRunnable.run(ThreadPool.java:685)
    at java.lang.Thread.run(Thread.java:619)
10415316 [TP-Processor1] WARN common.ChannelSocket  - processCallbacks status 2

Answer 1

Why are you storing the images in the DB? Save them as files and save the URL in the DB.

That way you can use AJAX to call a PHP that will read the DB, pull out the URL for the image and return it to you, so you can do something like:

img = document.getElementById("myimage");
img.src = URL; // where URL will contain the URL you got from the AJAX call 

Answer 2

try this link

Answer 3

That's not the way how it works. As answered before, you basically just need to change the src attribute of the <img> element to a different URL. The webbrowser will then reload the image itself automagically.

In case of JSP/Servlet, the URL should just point to a Servlet class which obtains an InputStream of the image from the database and writes it to the OutputStream of the response the usual Java IO way along with a set of response headers.

Here is how your Javascript instead should look like:

function changeImage(newSrc) {
    document.getElementById(Image_Element_Name).src = newSrc;
}

In this answer you can find a complete example how the Servlet should look like.

---

The SocketException: broken pipe is just a sign that the client side didn't process the response at all and aborted it. If you get rid of that Ajax stuff and do it as explained above, then it should work flawlessly.