получать изображения с сервера и отображать их

Question

У меня проблема. Я был бы признателен, если бы вы могли вести меня. У меня есть несколько изображений, расположенных на сервере. В моем клиентском коде (jQuery) мне нужно получить изображения (фактические изображения, а не их ссылки на сервере) с сервера (по AJAX-php) и показать изображения на моей странице. Когда я получаю изображения, я не хочу, чтобы они были сохранены на жестком диске клиента; Они мне просто нужны временно (возможно, браузер может оставить их для меня на короткое время). Не могли бы вы мне помочь? Я не знаю, как реализовать это с помощью jQuery / php / Ajax и, возможно, JSON.

мой текущий код:

<script>
$(document).ready(function () {
    var phpFileName="serverSide.php";
    $.ajaxSetup({
        "url":phpFileName,
        });
    $.ajax({
        "type":"GET",
        async: false,
        "data":{
            "newvar1":"value1",
        },
        "success":function(data){
            var imageName  = data.split('^');
        }
    });

    $imageDirOnServer = "some/Diron/Server/";
    for(i=0;i<imageName.length;i++){
        $("#Cell").append("<div style='background-image:url("+$imageDirOnServer+imageName[i]+".bmp);'></div>");
    }    
});
</script>

и код php (serverSide.php):

<?php
for($k=0;$k<3;$k++){
        echo sprintf("%02d",$k+1);
        echo "^";
    }
?>

этот код показывает 01.bmp, 02.bmp и 03.bmp, которые физически расположены на сервере, на моей веб-странице. Я хочу изменить это так, чтобы изображения брались с сервера моей веб-страницей, а затем отображались. Я получаю изображения с сервера при загрузке страницы, причина в том, что я не хочу, чтобы после этого трафик клиент-сервер получался. Я упомянул, что не хочу, чтобы изображения были сохранены на клиентском компьютере, потому что я думаю, что это не разрешено (без разрешения пользователя) в целях безопасности. Тем не менее, кеш браузера подходит для меня. Спасибо.

Answer 1

Я считаю, что вы хотите встроенные изображения .

Это работает, помещая данные изображения в HTML, и им можно манипулировать из Javascript.

В результате вы получите тег изображения, который выглядит примерно так:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tL" width="16" height="14" alt="My alt text">

Итак, вам нужно настроить ajax-вызов PHP-скрипта, где вы делаете что-то вроде этого:

<?php

  // Your AJAX url is script.php?imagename=image.jpg

  $image = basename($_GET['imagename']);
  if (!file_exists($image)) {
    header('HTTP/1.1 404 Not Found');
    exit;
  }

  $contentType = 'image/jpeg'; // You will need to put the correct type for the file in the string
  $str = "data:$contentType;base64,".base64_encode(file_get_contents($image));
  echo $str;
  exit;

... и когда вы получите ответ в Javascript, сделайте что-то вроде (например):

 var newImg = document.createElement('img');
 newImg.src = xhr.responseText;
 newImg.alt = 'My alt text';
 document.getElementById('some_element_that_exists').appendChild(newImg);

Очевидно, что в приведенном выше коде отсутствует необходимая проверка ошибок и т. Д., Но, надеюсь, это поможет вам начать работу.

Если преходящий педант хочет, чтобы jQuery-ify мой Javascript, не стесняйтесь.

Answer 2

Добавление к ответу DaveRandom: я думал, что если у вас много файлов, вы можете получить огромную главную страницу с большим количеством «кода изображений», который никогда не будет использоваться. Возможно, вы захотите получить эти «изображения», используя ajax.

Обратите внимание, что в некоторых версиях IE эти изображения не нравятся ..