У меня проблема. Буду признателен, если вы можете вести меня. У меня есть изображения, расположенные на сервере. В моем клиентском коде (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 Code (serverSide.php):
<?php for($k=0;$k<3;$k++){ echo sprintf("%02d",$k+1); echo "^"; } ?>
этот код показывает 01.bmp, 02.bmp и 03.bmp, которые физически расположены на сервере, на моей веб-странице. Я хочу изменить его, чтобы изображения были взяты с сервера на моей веб-странице, а затем отображены. Я получаю изображения с сервера при загрузке страницы, причина в том, что после этого я не хочу иметь трафик клиент-сервер. Я упомянул, что я не хочу, чтобы изображения сохранялись на клиентской машине, потому что я думаю, что это запрещено (без разрешения пользователя) из-за целей безопасности. Тем не менее, кеш браузера подходит для меня. Благодарю.
Я считаю, что вы хотите встроенные изображения .
Это работает, помещая данные изображения в 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, не стесняйтесь.
Добавляя к ответу DaveRandom: я думал, что если у вас много файлов, вы можете получить огромную главную страницу с большим количеством «кода изображений», который, возможно, никогда не будет использоваться. Вы можете захотеть получить эти «изображения» с помощью ajax.
Обратите внимание, что некоторые версии IE не нравятся эти изображения, хотя ..