Update WebPage after Servlet uploads an image

Question

I have a page showing an image and a button. Button uploads the image(acting as submit button for form).The image input is in a form that points to file upload servlet. Servlet succeeds to upload the image. But, It does not display the uploaded image in the img tag.

HTML:

<form id="upload-form" action="UpdatePic" target="upload_f" method="POST" enctype="multipart/form-data">
    <img id="pic" name="pic" src="back.png"/>
    <input name="pic-selector" type="file" />
    <button type="submit"> Upload </button>
    <p id="response"></p>
 </form>

SERVLET doPost SAMPLE: after upload is done

request.setAttribute("message", message);
getServletContext().getRequestDispatcher("/Message.jsp").forward(request, response);

I want to display uploaded image in img tag. What do i do?

Edit:

I know how to display images dynamically or from blobs. I want to show uploaded image as soon as upload is complete. Only by the action of click on Upload button. I need to add something to response so that it tells webpage that image is uploaded. and response will set img tag's src attribute somehow or use jQuery (.load function). But, as a part of response by servlet.

Possible duplicate of [How to retrieve and display images from a database in a JSP page?](http://stackoverflow.com/questions/2340406/how-to-retrieve-and-display-images-from-a-database-in-a-jsp-page) — SatyaTNV, Feb 12 '16 at 08:52
I know how to display images dynamically or from blobs. I want to show uploaded image as soon as upload is complete. Only by the action of click on Upload button. — rupinderjeet, Feb 12 '16 at 08:57
I need to add something to response so that it tells webpage that image is uploaded. and response will set img tag's src attribute somehow or use jQuery .load function. But as a part of response by servlet. — rupinderjeet, Feb 12 '16 at 08:58
You need to use AJAX. Read up on how to use jQuery to POST via AJAX and in the success-handler insert an image-tag into your html. — Johannes Jander, Feb 12 '16 at 09:12
[display image in img tag](http://stackoverflow.com/questions/14584630/how-to-retrieve-image-from-mysql-db-and-show-it-inside-td-and-img-tag-in-htm) — SatyaTNV, Feb 12 '16 at 09:12

score 0 · Answer 1 · answered Feb 12 '16 at 09:16

0

You Need to upload the image using ajax .

And once your images has been uploaded you need to send the response as a image instated of sending jsp page or a json data cotinaing address of image where you upload it.

if you store it in a file storage of server then you need to send path or

if you are storing it in DB as a blog or in somewhere else in nosql database or something else then you need to send id of image and in image tag you have to apply src as a servlet uri which return you image of id.

it based on which term you used in image uploading.

you are sending massege.jsp page in response of servlet request which might be wring in your case.

answered Feb 12 '16 at 09:16

Pratik Bhajankar

1,144
2
14
27

For some reason, i want to avoid using jQuery. I want to stick to Servlet and Form directly. Otherwise, last option is jQuery and i know how to do it in jQuery. – rupinderjeet Feb 12 '16 at 09:44
see if you want to do it without submitting the page then only option available is Jquery Ajax. so it will be depend on what is your requirment. – Pratik Bhajankar Feb 12 '16 at 10:08
other option is for you is upload the image with form submit and in response when instated of sending massage.jsp you can send same page with uploaded image data or its location address you can set in context or in session i.e in resources available in servlet and whenever your page has been load and if the image data is available the you can load the image from server with massage image uploaded successfully – Pratik Bhajankar Feb 12 '16 at 10:13

rupinderjeet · Accepted Answer · 2016-02-12T14:17:33.330

I have found the solution by myself. It is as following:

HTML/JSP

<form id="upload-form" action="UpdatePic" target="upload_f" method="POST" enctype="multipart/form-data">
    <div id='load-in-here'>
        <img id="pic" name="pic" src="back.png"/>
        /* @src is actually loaded using a mapped servlet that writes inputStream */
        <input name="pic-selector" type="file" />
        <button type="button" onclick="submitFormInIFrame(this.form, 'load-in-here')"> Upload </button>
        /* @submitFormInIFrame(formElement, response) */
        /* This method stops the redirect to new webpage and forces it to load response in virtual iframe inside form */
    </div>
</form>

Servlet Response : After Upload

request.setAttribute("message", message);
getServletContext().getRequestDispatcher("/ProfilePicDivision.jsp").forward(request, response);

ProfilePicDivision.jsp

<div>
   <img id="pic" name="pic" src="back.png"/>
   /* @src is actually loaded using a mapped servlet that writes inputStream */
   <input name="pic-selector" type="file" />
   <button type="button" onclick="submitFormInIFrame(this.form, 'load-in-here')"> Upload </button>
   /*  @submitFormInIFrame(formElement, response)  */
</div>

So, response loads the same code in 'load-in-here' div as it was before from ProfilePicDivision.jsp and its working for me. If any of you have questions, you can write here as a comment.

Update WebPage after Servlet uploads an image

2 Answers2