Servlet上传图像后更新WebPage(Update WebPage after Servlet uploads an image)

Servlet上传图像后更新WebPage(Update WebPage after Servlet uploads an image)

我有一个显示图像和按钮的页面。 按钮上传图像（作为表单的提交按钮）。图像输入采用指向文件上传servlet的形式。 Servlet成功上传图像。 但是，它不会在img标签中显示上传的图像。

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：上传完成后

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

我想在img标签中显示上传的图像。 我该怎么办？

编辑：

我知道如何动态显示图像或从blob中显示图像。 我想在上传完成后立即显示上传的图片。 只有通过点击上传按钮的操作。 我需要在响应中添加一些内容，以便它告诉网页上传图像。 和响应将以某种方式设置img标签的src属性或使用jQuery（.load函数）。 但是，作为servlet响应的一部分。

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.

最满意答案

您需要使用ajax上传图像。

一旦你的图像被上传，你需要发送response作为发送jsp页面的图像或你上传它的图像的json数据cotinaing地址。

如果将它存储在服务器的文件存储中，则需要发送路径或

如果你将它作为博客存储在数据库中或者存储在nosql数据库或其他地方的其他地方，那么你需要发送图像的id，并且在图像标记中你必须将src作为servlet uri应用，它返回你的id图像。

它基于您在图像上传中使用的术语。

您正在发送massege.jsp页面以响应servlet请求，这可能会在您的情况下扭曲。

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.