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

Can't you just set the src attribute of the image to point to a URL that gets you the image data? Is there really a reason you're using "ajax"? — Matti Virkkunen, May 16 '10 at 08:13
Can you post the code you have so far? It is very difficult to imagine what you have done and how you have done it and come up with suggestions. — Oded, May 16 '10 at 08:13
Cripes, stop using "ajax" just because the cool kids use it... there's no point in using XHR here. — Matti Virkkunen, May 16 '10 at 08:30
ok then how i can trigger request for the jsp file that read the image on mouse over action? i tried to use the attribute myimage.src="get_image.jsp?...." i get the image once and when it changed in DB by user upload , the action mouse over again should request the jsp file again and change the img src , but that would not happen — ama, May 16 '10 at 08:40
@ama: See http://stackoverflow.com/questions/2841730/use-ajax-to-reload-captcha — nico, May 16 '10 at 09:33
oh thnx the problem solved ,"The browser is just loading the image for you when it detects the new source" , i was just need to insert time to the request of jsp page : Image.src='get_image.jsp?s='+(new Date()).getTime(); — ama, May 16 '10 at 10:00

score 2 · Answer 1 · answered May 16 '10 at 08:29

2

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

answered May 16 '10 at 08:29

nico

50,859
17
87
112

I don't want to use files , and I'm restrict with using AJAX and JSP files – ama May 16 '10 at 08:33
May I ask why? Interesting discussion on saving in the filesystem vs the DB http://www.webmasterworld.com/forum88/9091.htm – nico May 16 '10 at 08:36
As suggested before I think it's best to just set the src to the URL that fetches you the image. This also avoids having a lot of code that just gets an image from a URL! – filip-fku May 16 '10 at 08:45
because i want to be able to get the old images for each user any time i want – ama May 16 '10 at 08:45
1

Storing them as files won't prevent you from doing that. – Quentin May 16 '10 at 08:54
yes i know , but as i said i need to go with this way , there is any suggestion how to get the src from the response ?? – ama May 16 '10 at 08:59

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

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.

edited May 23 '17 at 12:11

Community

1
1

answered May 16 '10 at 15:57

BalusC

1,082,665
372
3,610
3,555

yes I see ,that is what I did for obtain the image from DB the problem was in sending the request for the jsp file ,when I add the time as parameter to the request ,the browser found new request each time ,so there will be new src for the image and the browser will load the image. – ama May 17 '10 at 05:36
Ah OK. You're welcome. I however see that you're new here. You are supposed to vote the useful answers (click the up arrow) and accept the most helpful answer (click the checkmark). Also see this link to learn how Stackoverflow works: http://stackoverflow.com/faq :) – BalusC May 18 '10 at 13:50

Retrieving image from database using Ajax

2 Answers2