как отправить png изображение с сервера для отображения в браузере через ajax

Мне было тяжело, что должно быть невероятно нормальной задачей. Я загружаю и сохраняю изображения на своем веб-сервере и сохраняю путь к файлу в базе данных 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 . Посмотрите на этот вопрос – функция здесь дана.