Мне было тяжело, что должно быть невероятно нормальной задачей. Я загружаю и сохраняю изображения на своем веб-сервере и сохраняю путь к файлу в базе данных MySQL (все это работает). То, что не работает, – это получение файла изображения с сервера и отображение его на странице через ajax.
Первоначально я пытался просто извлечь путь из базы данных и обновить атрибут src тега по пути к изображению. Это работало, но таким образом все изображения находятся в папке на сервере, где все люди имеют к ним доступ. Это не хорошо. Я могу иметь только изображения, принадлежащие определенным пользователям, доступным этим пользователям.
Чтобы ограничить доступ к этим фотографиям, я добавил директиву Apache в эту папку, которая успешно ограничивала доступ. Тогда возникла проблема в том, что я не смог отобразить изображения в браузере, установив для этого пути атрибут src . См. Мой пост: https://serverfault.com/questions/425974/apache-deny-access-to-images-folder-but-still-able-to-display-via-img-on-site
Наконец, я узнал, что я должен использовать PHP для чтения данных изображения непосредственно с сервера и отправки этих данных в браузер. Я использовал функцию file_get_contents () , которая работает для преобразования файла изображения (PNG) на сервере в строку. Я возвращаю эту строку в браузер при вызове ajax. То, что я не могу получить, – это: как преобразовать эту строку обратно в изображение с помощью JavaScript?
Смотрите этот код:
$.ajax({ url: get_image.php, success: function(image_string){ //how to load this image string from file_get_contents to the browser?? } });
Вы можете отображать изображение «без доступа» по умолчанию для пользователей, которым запрещен доступ к изображению:
<?php $file = $_GET['file']; // don't forget to sanitize this! header('Content-type: image/png'); if (user_is_allowed_to_access($file)) { readfile($file); } else { readfile('some/default/file.png'); }по<?php $file = $_GET['file']; // don't forget to sanitize this! header('Content-type: image/png'); if (user_is_allowed_to_access($file)) { readfile($file); } else { readfile('some/default/file.png'); }
И, на стороне клиента:
<img src="script.php?file=path/to/file.png" />
В качестве альтернативы, если вам действительно нужно или нужно отправить данные через Ajax, вы можете закодировать Base64:
<?php echo base64_encode(file_get_contents($file));
И поместите ответ в тег img используя схему URI данных
var img = '<img src="data:image/png;base64,'+ server_reponse +'"/>';
Учитывая, что кодированные данные Base64 значительно больше оригинала, вы можете отправить необработанные данные и закодировать их в браузере с помощью библиотеки .
Это имеет смысл для вас?
Вместо того, чтобы get_image.php через AJAX, почему бы просто не использовать:
<img src="get_image.php" />
Это практически одно и то же. Вы можете просто использовать AJAX для динамического обновления <img> .
Вы не можете сделать это через ajax.
Вы могли бы сделать что-то вроде этого:
<img src="script.php?image=image_name" />
Затем используйте JavaScript для изменения строки запроса.
Фактически вы можете внедрять данные изображения внутри тега img в браузере, поэтому ajax-код может выглядеть так:
$.ajax({ url: get_image.php, success: function(image_string){ $(document.body).append("<img src='data:image/gif;base64," + base64_encode(image_string) + "' />); } });
Обратите внимание, что вам нужно будет написать эту функцию base64_encode . Посмотрите на этот вопрос – функция здесь дана.