HTML : HTML AJAX에서 이미지가 표시되지 않습니다.

HTML 코드로 이미지를 업데이트하는 데 문제가 있습니다. 서블릿에서받은 이미지. 다음은 html 코드입니다. 'imgid'는이 AJAX 호출의 서블릿 게시 요청에서 이미지를 업데이트하려고하는 이미지 소스입니다. 또한 아래 서블릿 코드를 붙여 넣었습니다. ELSE이 HTML 요청에서 코드 일부가 호출됩니다. 서블릿 괜찮아요, 그 문제는 이미 그 코드를 테스트했습니다.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>

서블릿 코드 : ELSE 부분은 HTML 코드에서 호출 (서블릿의 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 dev 도구)을 사용하면 서버 코드가 작동하는지 여부를 확인할 수 있습니다.

base64를 사용하지 않거나 서버가 base64 데이터를 반환하지 않으면 사용할 수 있습니다. 그것)

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

출처

2014-01-15 19:17:46

죄송합니다. – Stella

서버 응답을 확인 했습니까? –

동일한 서버 코드가 doGet 메서드에서 이미지를 반환하는 코드 조각을 유지하고이 서블릿을 테스트 목적으로 직접 호출하면 잘 동작합니다 (html로 이미지 표시). – Stella

HTML : HTML AJAX에서 이미지가 표시되지 않습니다.

답변

관련 문제