Как загрузить изображение из БД через ajax методом POST?

Здравствуйте!

Подскажите, пожалуйста, как загрузить картинку из БД в html код через ajax?

Вот в таком виде запрос отрабатывается без проблем:
$('#depIcon').html('<img src="php/getDepImage.php?id='+selectedID+'" alt="" style="width:70px; height:75px;">');


Но как сделать то же самое через такой запрос:
$.ajax({
		url: 'php/getDepImage.php',
		type: 'POST',
                data: {param: selectedID},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
		console.log(XMLHttpRequest);
		console.log(textStatus);
	        console.log(errorThrown);
		},								
		dataType: "json",
		success: function(data){
                }
            });


И вот в случае успешной передачи данных как прописать вставку этих самых данных в тег img?
Если запустить отдельно файл getDepImage.php, который запрашивает изображение из БД, то в html коде отображаемой страницы полученные данные уже встроены в тег img. Кажется логичным прописать в success: function(data){ $('#depImage').html(data); } Но такая форма не работает.
  • Вопрос задан
  • 3651 просмотр
Пригласить эксперта
Ответы на вопрос 9
greabock
@greabock
Могу
Я смотрю, и просто не понимаю: причем тут аякс?
Подгрузка любой картинки по аттрибуту SRC - само по себе асинхронный запрос. Зачем запихивать в аякс то, что и так асинхронно?
Ответ написан
Комментировать
viktorvsk
@viktorvsk
var event = 'click'; // hover, keydown .. 
var getImage = function( selectedID ) { $('#depIcon').html('<img src="php/getDepImage.php?id='+selectedID+'" alt="" style="width:70px; height:75px;">'); }

$('#trigger').on(event, getImage( selectedID ));
Ответ написан
Комментировать
LestaD
@LestaD
Веб разработчик
У тебя ошибка в коде в:
data: {param: selectedID},
ты вместо id написал param
Гугли в сторону base64
Ответ написан
Комментировать
@BanaBayana Автор вопроса
В приложении нужно будет выбирать из списка подразделение. После чего из базы данных подтягиваются ряд показателей по работе этого подразделения и в том числе картинка. Можно выбрать следующее подразделение и из БД подтянутся другие показатели и другой символ. Не представляю, как это сделать через src
Ответ написан
@BanaBayana Автор вопроса
Благодарю, я попробую применить Ваш код. Но сейчас пытаюсь представить запрос именно в виде:
$.ajax({
		url: 'php/getDepImage.php',
		type: 'POST',
                data: {param: selectedID},
		error: function (XMLHttpRequest, textStatus, errorThrown) {
		console.log(XMLHttpRequest);
		console.log(textStatus);
	        console.log(errorThrown);
		},								
		dataType: "json",
		success: function(data){
                }
            });


Не важно post/get Сделать это я пытаюсь, чтобы отследить поступление (или непоступление) нового изображения из БД. Так как не для каждого подразделения создан символ. Нужно чтобы в случае его отсутствия, можно было заменить пустой пришедший img изображением-заглушкой. Вот в предполагаемой выше функции я и хочу отследить пришло изображение или нет.
Ответ написан
Комментировать
@BanaBayana Автор вопроса
Пыталась и с работающим кодом это сделать
$('#depIcon').html('<img src="php/getDepImage.php?id='+selectedID+'" alt="" style="width:70px; height:75px;">');


Прописать условие if, но не смогла определить значение значение приходящего пустого изображения. Смотрела value приходящих в div изображений $('#depIcon').value, но что "пустой" картинки, что у "заполненной" данное значение undefined. Кроме как отследить возвращение данных в success: function(data){ } идей не приходит. Возможно Вы знаете, как реализовать эту проверку?
Ответ написан
greabock
@greabock
Могу
<img src="some.png" onerror="setDefaultSrc(e)">
<script>
setDefaultSrc(e){
$(e.target).attr({src:"default.png"});
}
</script>

за работу кода не ручаюсь, но мысль я думаю ясна.
Ответ написан
@BanaBayana Автор вопроса
Ясна. Попробую применить
Ответ написан
Комментировать
@BanaBayana Автор вопроса
В данном виде код, действительно, не отрабатывает. Но примененное в нем "onError" просто спасло. Именно с его помощью смогла отловить "пустые" изображения, пришедшие из базы данных. И тогда уже прописать вставку картинки-заглушки. Получилось следующее:

Запрос картинки:
$('#depSymbol').html('<img src="php/getDepImage.php?id='+selectedID+'" onError="setDefaultSrc()">');


Функция setDefaultSrc():

function setDefaultSrc(){
   $('#depSymbol').html('<img src="images/somepicture.png">');
};


Благодарю Вас.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы