如何将servlet响应中的图像发送到ajax？答案

【问题标题】：How to send image in servlet response to ajax?如何将servlet响应中的图像发送到ajax？
【发布时间】：2011-06-22 15:40:50
【问题描述】：

我正在将图像文件从数据库上传到 jsp。我使用 SQL 选择了图像，如下所示

select (logo_img_one) from accounts_logo where logo_usrm_id=1

我使用二进制流读取图像

InputStream readImg = rs1.getBinaryStream(1);

并将内容类型设为“image/jpeg”

response.setContentType("image/jpg");

现在我想知道如何使用响应的getoutputstream将图像发送到ajax以及如何进入ajax。我怎样才能做到这一点？

【问题讨论】：

标签： javascript ajax servlets

【解决方案1】：

这是行不通的。 JavaScript 无法将检索到的字节保存在本地或其他地方并告诉浏览器显示它。最好的办法是将图像的 URL 作为字符串传回，然后让 JavaScript 将其设置为 HTML <img> 元素的 src 属性。

例如在小服务程序中

response.setContentType("text/plain");
response.getWriter().write(imageUrl); // e.g. "images/some.png"

在 JS 中

var imageUrl = xhr.responseText;
var img = document.createElement("img");
img.src = imageUrl;
document.getElementById("someDivId").appendChild(img);

这样一个

<div id="someDivId"></div>

会动态地以类似的方式结束

<div id="someDivId><img src="images/some.png" /></div>

您可以创建一个图像 servlet，将图像从 DB 流式传输到响应的输出流，并将 servlet 映射到 /images/*。你可以找到一个例子here。

【讨论】：

【解决方案2】：

设置contentType后可以如下使用输出流

   Printwritter out =response.getWritter();
   out.println(imageObject);
   out.flush

【讨论】：

图像是二进制数据，不是字符数据。将二进制数据视为字符数据只会损坏二进制数据。
将您的内容类型设置为 response.setContentType("image/gif");
Mr.BalusC 停止批评其他 nd 只专注于您的业务。因为在我的回答中，我没有提到它的角色对象。
是的，你做到了。您建议使用Writer。

【解决方案3】：

它可能会起作用...想法是将图像的 src 属性设置为：

src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYlJREFUeNrMVD1rwlAUPfkwBBxFKQQlDhmjqzj4F9w7FfwThZaW9n8UnDrrn1BEXNTBRQQhEE1ERRR0Sd990A7VaKJJ6YHzEu4N99z3zrsRGo2GAuCF8YFRQzSwGOuM7zJb3hgfES2o0SdGSWRLDfGhRgLpGAXS4q0VCoUCBEHwzd8skM/nUSqVoCjKybz8O1CtVn2LeZ4H27YxnU6xXC6x3+95PJPJoFKpoN1uY7vdnhfww3w+x3A4xGaz4d3quo5sNvuTTyaTXKTb7cJ13csCzWbzKKaqKj/zXC4HSZKO8iRcLpcxGAwwmUzC7UDTNBSLRSQSiVAeyUGNpM4v4XA4oNfr8eMMLJBKpWCaJn9fLBawLAur1Qq73Y6b/H0pyNyrTDYMA7PZDKPRCOv1+uQ3ZCqZe9UcOI6DTqfjW5zMbLVa3Bu6RaE9GI/HZ/P9fp8/qfipYROj+ukEnuQgEx0GImKGHGSC//UO/kTAibG+QwIfMQrUyeRXusaM94x3ERW2GT8Zn78EGACRmoKUJhB1TQAAAABJRU5ErkJggg=="

base64 字符串可以通过 ajax 进行查询，方法是调用您的 servlet 并对从 DB 检索到的输入流进行编码。

【讨论】：