How to send an image from Java-serverside, and handle it on JQuery-clientside

Question

I want to rescale an image and return it to the client, and am running into some trouble with sending the image back to the client.

My serverside controller:

@RequestMapping(value = {"/fw/ajax/submit_profileimage.do"})
public void submitFile(HttpServletRequest request, HttpServletResponse response, @RequestParam("file") MultipartFile f) {
    try {
        InputStream in = new ByteArrayInputStream(f.getBytes());
        BufferedImage originalImage = ImageIO.read(in);
        BufferedImage newImage = new BufferedImage(MAX_HEIGHT, MAX_WIDTH, BufferedImage.TYPE_INT_RGB);
        paintComponent(newImage.getGraphics(), originalImage, getRatio(originalImage));

        ImageIO.write(newImage, "png", response.getOutputStream());
        response.setContentType("image/png");
        response.getOutputStream().flush();
        response.getOutputStream().close();
    } catch (Exception ex) {
        ex.printStackTrace();
    }
}

Clientside Jquery code:

uploadButton.click(function(){
    $('#imagePreview').addClass('loading');
    form.ajaxSubmit(function(data){
    alert(data); //this is where I'd like to handle the image!
    });
});

the data that is returned by the ajaxSubmit is:

"<body style="margin: 0px;"><img style="-webkit-user-select: none" src="http://localhost:8080/fairview/ajax/submit_profileimage.do"></body>"

Clearly not an image file. But when I check the debugger, I can see that the submit_profileimage.do request has succeded, and allegedly returned an image! I have no idea if I've done something wrong on the clientside, or on the serverside. Debugger-info-overview Debugger-info-detailed

So the question is: How can I display the image on the clientside?

score 3 · Answer 1 · answered Oct 13 '11 at 11:21

3

I would simply save the resized image on the server and return back to jquery simpy a URL to where the resized image has been saved. Then simply set the src attribute of the image to that URL. The browser will than take care of downloading the image.

uploadButton.click(function(){
    $('#imagePreview').addClass('loading');
    form.ajaxSubmit(function(data){
        //Assuming data is the URL to the resized image.
        $("#myimage").attr("src", data);
    });
});

answered Oct 13 '11 at 11:21

Gabriel Spiteri

4,896
12
43
58

The images will not be saved as files, but rather as bytearrays becouse of a business requirement. I thought that it wouldn't be nessesary to send the image as a bytearray though, but rather just send back the scaled image with ImageIO. Am I perhaps tackling this problem the wrong way? – Soroush Hakami Oct 13 '11 at 11:25

score 0 · Accepted Answer · edited May 23 '17 at 12:07

0

I went with the approach described as the accepted answer here: Help getting image from Servlet to JSP page

Which pretty much means I didn't really answer the initial question, I still can't handle a raw image clientside. Rather, I use one service to store the image, return the id of where the image is stored, and set the src attr of the image to a service that will return the image.

edited May 23 '17 at 12:07

Community

1
1

answered Oct 13 '11 at 14:23

Soroush Hakami

5,226
15
66
99

How to send an image from Java-serverside, and handle it on JQuery-clientside

2 Answers2