Question

我希望在向服务器发送JQuery post（）请求后，在我的html页面上显示一个图像文件，如下面的代码所示。

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

<!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();
}
}

请帮助，我一直在寻找这个，但我没有一个对我有用的答案。

Answer 1

正如Adarsh Konchady所说，您可以返回图片的网址，以便您可以使用当前代码显示它。

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

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

Answer 2

将图像转换为base64字符串并将其发送到您的视图。

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

并简单地在图像src中设置base64字符串，如下所示。

| id | event_type | by_user | asset |       time |
|  1 | owner      | a       |    10 | 1111111111 |
|  2 | updated    | b       |    20 | 1111111112 |
|  3 | owner      | a       |    30 | 1111111113 |
|  4 | owner      | c       |    20 | 1111111114 |
|  5 | updated    | a       |    10 | 1111111115 |
|  6 | owner      | a       |    20 | 1111111118 |

在post（）请求之后在jquery中显示图像

2 个答案: