Ajax Base64 Image Response Text - PullRequest
Новая
       6

Ajax Base64 Image Response Text

1 голос
/ 04 марта 2012

Я отправляю 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.'" />';


          ?>

Ответы [ 2 ]

0 голосов
/ 04 марта 2012
  1. вы захватываете ответ
  2. вы вводите ответ в DOM

С помощью jQuery код будет выглядеть примерно так: 

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

Тем не менее, я бы не советовал передавать изображение как base64, так как браузер не сможет его кешировать.Если передача изображения в формате base64 не является абсолютным требованием вашего проекта , я бы порекомендовал серверу просто передать ссылку на фактическое изображение .

0 голосов
/ 04 марта 2012

Попробуйте заменить 

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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...