javascript - post()请求后在jquery中显示图像

标签 javascript jquery html image

我想在我的 html 页面上显示一个图像文件,该文件是我在向服务器发送 JQuery post() 请求后收到的,如下面的代码所示。

我已经评论了我遇到的问题。

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

  <script>
    $.post("http://10.10.129.164:8080/picsOnDemand/sendcphoto/cphoto", {

        clientid: "1234567890",

      },
      function(data) {

        $('#blah').attr('src', data); //What should I code here? 

      });
  </script>
</head>

<body>

  <div data-role="page">
    <div data-role="header">
      <h1>Welcome To My Homepage</h1>
    </div>

    <div id="newimage" data-role="main" class="ui-content">
      <p>I Am Now A Mobile Developer!!</p>
      <img id="blah" src="" height="200" width="200" alt="Image preview...">
    </div>

    <div data-role="footer">
      <h1>Footer Text</h1>
    </div>
  </div>

</body>

</html>

从服务器端,我发送一个图像文件作为响应,如下面的代码所示:

@Path("/sendcphoto")
public class SendCPhotoRequested {
@POST
@Path("/cphoto")
@Produces("image/jpeg") 
public Response getCPhoto(@FormParam("clientid") String clientid){

     File file = new File("C:\\Users\\nmn\\workspace1\\clientimages\\"+clientid+".jpg");
     System.out.println("File sent");
     ResponseBuilder builder = javax.ws.rs.core.Response.ok((Object) file);
     builder.header("Content-Disposition", "attachment; filename=clientpic.jpg");
    return builder.build();
}
}

请帮忙,我一直在寻找这个,但我没有得到一个对我有用的答案。

最佳答案

正如 Adarsh Konchady 所说,您可以返回图像的 URL,以便可以使用当前代码显示它。

您还可以将图像内容作为 base64 字符串和 display it 返回使用data URI :

$('#blah').attr('src', 'data:image/jpeg;base64, ' + data);

关于javascript - post()请求后在jquery中显示图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36768015/

相关文章:

使用 apply() 函数的 JavaScript 函数构造函数链接

javascript - 选择日期和特殊日期加载由 ajax 在 gldatepicker 中设置

javascript - 如何使用javascript(jquery)一一改变元素的颜色,然后再一一重置结果

jquery - Gridster.js 带有内容的可拖动 div

css - 在右边界画三 Angular 形

html - header 对齐问题 - 无法修复

javascript - 是否可以以不同的名称加载 requirejs

php - 通过 ajax 获取另一个页面并显示数据 -> 无法显示正确的格式

jQuery 切换焦点/模糊

javascript - 使用 css 或 jquery 在图标旁边放置文本