Javascript - загрузка изображения по клику - PullRequest
Новая
       7

Javascript - загрузка изображения по клику

0 голосов
/ 31 октября 2010

ОК, я на самом деле вызываю некоторое промежуточное ПО Java, которое возвращает изображение с картинки.Изображение капчи загружается на странице при загрузке страницы просто с помощью: 

<a href="#" id="ci"><img id="stickyImg" src="stickyImg" /></a>

Я хочу перезагрузить изображение капчи по щелчку текущего изображения капчи.Я попробовал несколько вещей, но у меня ничего не получается.

Под "пробовал несколько вещей" я имею в виду, что я попробовал: 

$("#ci").click(function(){

        $("#stickyImg").load('stickyImg');

        return false;
    });

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

<img src="stickyImg"><img xmlns="http://www.w3.org/1999/xhtml">pngbinarygibberishsymbols</img>

Хммм ... может быть, мне нужно указать помещение изображения в атрибут src?Может быть?Что вы все думаете?

РЕДАКТИРОВАТЬ:

Тьфу!Помещение ответа в мой img src приводит к: 

<img src="    * captcha image�PNG  ��� IHDR�������Ketc, etc">

Исходные двоичные данные выводятся.Какого черта?

РЕШЕНИЕ:

Решение приходит из другого, похожего, поста, который я сделал по этому вопросу.Вы можете прочитать об этом здесь.

В итоге (* отредактированный благодаря Ли) код, который работает, выглядит следующим образом: 

$("#ci").click(function(){

        $("#stickyImg").attr('src', 'stickyImg?' + (new Date().getTime())); 
        return false;
    });

Ответы [ 2 ]

3 голосов
/ 31 октября 2010

было бы полезно, если бы вы опубликовали более полный пример, включающий разметку, которая встраивает ваше изображение в исходный документ;но, сделав несколько разумных предположений, я думаю, что вам просто нужно что-то вроде следующего ...

при условии, что ваша разметка выглядит примерно так: 

<div id="ci">
  <img src="/stickyImage" />
</div>

, тогда следующий JS должен сделать свое дело: 

$("#ci").click(function(){

    $("img",this).remove();
    $(this).html('<img src="/stickyImage" />');

    return false;
});

удачи.

[править] Если вы используете этот код для загрузки изображения, которое динамически генерируется на вашем сервере (или которое может периодически изменяться, дляпо какой-то причине), вы также должны быть уверены, что браузер правильно учитывает склонность браузера кешировать данные, которые он считает статичными.Это обычно выполняется двумя способами (любой из них будет работать):

1) гарантирует, что URL всегда будет отличаться при каждой загрузке изображения.Вы можете сделать это легко, просто добавив случайное число к части строки запроса URL-адреса изображения.Таким образом, в приведенном выше примере $(this).html('<img src="/stickyImage" />') станет $(this).html('<img src="/stickyImage?"+(new Date().getTime()) />').(Это по сути идентично подходу, на котором в конечном итоге остановился OP - см. Изменения OP выше).

2) убедитесь, что сервер возвращает данные изображения, включая надлежащие заголовки HTTP в ответе, чтобы указать, чтоизображение является динамическим и не должно кэшироваться.Вы можете увидеть более подробную информацию о том, как отправлять заголовки без кэширования в этом сообщении SO .

Вот как вы можете установить необходимые заголовки из сервлета Java: 

response.setHeader("Cache-Control", "no-cache, no-store, must-revalidate"); // HTTP 1.1.
response.setHeader("Pragma", "no-cache"); // HTTP 1.0.
response.setDateHeader("Expires", 0); // Proxies.

Вариант № 2, возможно, является более "технически правильным" способом решения проблемы кэширования, но, как яСказанное выше - либо сработает, и вариант № 1 является очень надежным подходом, который зачастую существенно проще, чем вариант № 2.

Все это, как говорится, - проблема кэширования является отдельной проблемой от первоначального вопроса, который былспросил здесь.Первоначальный вопрос касался отображения встроенных двоичных объектов в HTML.Эта проблема возникла из-за неправильного использования функции jquery load().ОП основывается на подходе, который использует функцию attr() для установки атрибута src.Подход, который я показал, включает создание нового элемента img и удаление старого элемента.Любой из этих подходов будет работать, но функция load() не будет работать для этой цели.

1 голос
/ 31 октября 2010
...