HTML：圖像沒有從HTML AJAX調用顯示

我在更新HTML代碼中的圖像時遇到問題。我從一個servlet接收的圖像。以下是html代碼，'imgid'是圖像源，我試圖從此AJAX調用的servlet發佈請求更新圖像。我也在下面粘貼了我的servlet代碼，其中ELSE代碼的一部分從此HTML請求中調用。 Servlet很好，沒有問題，已經測試過這個代碼。HTML：圖像沒有從HTML AJAX調用顯示

HTML代碼：

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

}

來源

2014-01-15 Stella

試試這個

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

確保服務器返回正確的base64編碼的圖像數據。可以使用debugger;（Chrome瀏覽器開發工具），看看服務器代碼工作或沒有

，如果你不希望使用一個base64或服務器沒有返回的base64數據則可以使用（我不知道它）

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

請參閱http://en.wikipedia.org/wiki/Data_URI_scheme

來源

2014-01-15 19:17:46

對不起，它仍然沒有得到圖像。 – Stella

你檢查過服務器的迴應嗎？ – 2014-01-15 19:36:28

當我保留那段返回圖像的代碼時，相同的服務器代碼工作正常（在html中顯示圖像），在doGet方法中並直接調用此servlet以進行測試。 – Stella

HTML：圖像沒有從HTML AJAX調用顯示

回答

相關問題