Question

我发送ajax请求到服务器：客户端代码：

             <html>
         <head>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
         <title>Untitled Document</title>
         <script language="">
         if (window.XMLHttpRequest)
          {
            xmlhttp=new XMLHttpRequest();

          }

         else
          {
           xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }

          var imgVal='img_id'+1;

          xmlhttp.open("GET","imageprovider.php",false);
          xmlhttp.send();

          if(xmlhttp.readyState==4)
          {


            alert(xmlhttp.responseText);
            document.getElementById('img').appendChild(xmlhttp.responseText);

          }

    </script>

</head>

<body>

    <div id='img'>

    </div>

</body>

这是服务器端代码，它显示了一个带有base64编码的简单图像。如何从客户端获得上述代码的响应并显示它。

      Server Side PHP Code :

          <?php 

           $img_src = "images/1.png";

           $imgbinary = fread(fopen($img_src, "r"), filesize($img_src));
           $img_str = base64_encode($imgbinary);
           echo '<img src="data:image/jpg;base64,'.$img_str.'" />';


          ?>

Answer 1

尝试替换

document.getElementById('img').appendChild(xmlhttp.responseText);

带

document.getElementById('img').innerHTML = xmlhttp.responseText;

或者，如果您需要继续使用.appendChild（），请尝试替换

document.getElementById('img').appendChild(xmlhttp.responseText);

带

var o = document.createElement('img');
o.src = xmlhttp.responseText;
document.getElementById('img').appendChild(o);

并替换

echo '<img src="data:image/jpg;base64,'.$img_str.'" />';

带

echo 'data:image/jpg;base64,'.$img_str;

Answer 2

您捕获回复
您将响应注入DOM

whith jQuery代码将是这样的：

$.ajax({
  url: "imageprovider.php",
  context: document.body,
  success: function(data){
    $('#objectToAddImage').html(data);
  }
});

然而，我建议不要将图像作为base64传递，因为浏览器无法缓存它。如果将图像作为base64编码传递不是项目的绝对要求我建议服务器简单地传递指向实际图像的链接。

Ajax Base64图像响应文本

2 个答案: