CODEWITHSUNDEEP
html
Stella
Stella

Reputation: 1868

HTML: Image not showing from HTML AJAX call

I am having issue with updating image in a HTML code. The image that i'm receiving from a servlet. The following is the html code, 'imgid' is the image source, where i'm trying to update image from a servlet post request from this AJAX call. I have also pasted my servlet code below, where ELSE part of the code is called from this HTML request. Servlet is fine, no issues with that, already tested that code.

HTML CODE:

<!DOCTYPE html>
<html>
<head>
<script>
function loadImage()
{
    var xmlhttp;
    var count=1;
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
            var img = document.getElementById("imgid");
            img.src = '<img src="data:image/jpg,' + xmlhttp.responseText + '"/>';
            count = 2;
            setTimeout('loadImage()', 1000);
        }
    }
    xmlhttp.open("POST","http://localhost:8080/MyServlet/MyServlet",true);
    xmlhttp.send();
}

</script>
</head>
<body onload="loadImage()">

<div id="myDiv"><h2>Co sharing</h2></div>

<p><img src="large.bmp" id="imgid" width="300" height="400" />


</body>
</html>

Servlet code: ELSE part is called from HTML code (No issues with the servlet doPost code, its tested and working fine)

protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    System.out.println("doPost calling....");

    if(request.getHeader("User-Agent").indexOf("Mobile") != -1) {
        //you're in mobile 
        System.out.println("Caller is Mobile client");

        // TODO Auto-generated method stub
        String fileName = null;
        fileName = request.getParameter("filename");
        System.out.println("filename: " + fileName);
        String type = request.getHeader("User-Agent");
        System.out.println("device type: " + type);

        fileName = request.getParameter("caller");
        //System.out.println("caller: " + fileName);

        DataInputStream din = new DataInputStream(request.getInputStream());
         byte[] data = new byte[0];
         byte[] buffer = new byte[512];
         int bytesRead;
         while ((bytesRead = din.read(buffer)) > 0) {
         // construct an array large enough to hold the data we currently have
         byte[] newData = new byte[data.length + bytesRead];
         // copy data that was previously read into newData
         System.arraycopy(data, 0, newData, 0, data.length);
         // append new data from buffer into newData
         System.arraycopy(buffer, 0, newData, data.length, bytesRead);
         // set data equal to newData in prep for next block of data
         data = newData;
         }          

         System.out.println("doPost data len " + data.length);


         ServletContext context = request.getSession().getServletContext();
         context.setAttribute("imageData", data);

         PrintWriter out = response.getWriter();
         out.println("Image Uploaded Successfully!!!");
    }   
    else
    {
        System.out.println("Caller is Desktop probably..");

        ServletContext context = request.getSession().getServletContext();
        // context.setAttribute("imageData", data);
        byte[] data = (byte[])context.getAttribute("imageData");
        //Object attribute = context.getAttribute("imageData");
        System.out.println("Desktop based doPost datalen:  " + data.length);

        ServletOutputStream out;  
        out = response.getOutputStream();  
        BufferedOutputStream bout = new BufferedOutputStream(out);  
        bout.write(data);
        bout.close();
    }
}

}

Upvotes: 0

Views: 486

Answers (1)

user3199582
user3199582

Reputation:

try this

img.src='data:image/jpg,base64,' + xmlhttp.responseText;

make and sure that server return correct base64 encoded data of image. you can use debugger; (chrome dev tools) to see server code working or not

if you don't want to use base64 or server don't return base64 data then it can be used (i'm not sure about it)

img.src='data:image/jpg,' + encodeURIComponent(xmlhttp.responseText);

see http://en.wikipedia.org/wiki/Data_URI_scheme

Upvotes: 2

Related Questions