Question

我遇到了在HTML代码中更新图片的问题。我从servlet接收的图像。以下是html代码，'imgid'是图像源，我正在尝试从这个AJAX调用的servlet post请求更新图像。我还在下面粘贴了我的servlet代码，其中 ELSE 部分代码是从这个HTML请求中调用的。 Servlet很好，没有问题，已经测试过该代码。

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代码： ELSE 部分是从HTML代码中调用的（servlet doPost代码没有问题，经测试且工作正常）

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

}

Answer 1

试试这个

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

确保服务器返回正确的base64编码图像数据。您可以使用debugger;（chrome dev工具）查看服务器代码是否正常

如果您不想使用base64或服务器不返回base64数据，那么可以使用它（我不确定）

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

请参阅http://en.wikipedia.org/wiki/Data_URI_scheme

HTML：图像未显示HTML AJAX调用

1 个答案: