Как я могу загрузить изображение с помощью jquery?

В настоящее время я работаю над классом, который генерирует диаграммы в виде изображений с помощью php. Я хочу динамически загружать эти изображения с помощью jquery. Как я могу это сделать?? У меня не будет реального файла изображения, только содержимое файла, когда я вызываю его с помощью ajax... И я не могу просто определить php-скрипт как src, потому что мне нужно передать параметры Post картинке...

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

Хорошо.. Думаю, мне нужно объяснить это немного подробнее...

Вот html-код:

<div>
<img id="image" />
</div>
<input type="button" onclick="loadPicture();" />

Когда кнопка нажата, некоторые данные должны быть отправлены в php-скрипт, который генерирует картинку. Функция обратного вызова или что-то подобное теперь должны размещать изображение в элементе img-. Простое размещение изображения в теге img не работает. Следующий код будет работать, но как я могу добавить параметры POST ??

<img src="<scriptname>.php" />

javascript image php jquery ajax
person SvenFinke    schedule 05.05.2009    source источник
comment
Что вы подразумеваете под параметрами поста? Как я уже говорил ниже, метод jQuery .post может принимать параметры и возвращает результат в виде обратного вызова. Подробнее об этом можно узнать здесь: docs.jquery.com/Ajax/jQuery.post   -  person Brayn    schedule 05.05.2009
comment
Я имею в виду параметры, которые отправляются в заголовке сообщения. я знаю функцию $.post, но я действительно не знаю, как должен выглядеть ответ. Я не могу передать путь к изображению, потому что изображение не существует, я не могу передать само изображение, потому что я не могу его отобразить (я не знаю, как его отобразить)...   -  person SvenFinke    schedule 05.05.2009

Ответы (4)


arrow_upward
3
arrow_downward

Запросы Http POST не предназначены для возврата ресурсов. Почему бы вам не использовать запрос GET? Способ «REST» сделать это будет состоять в том, чтобы создать изображение с запросом POST, а затем загрузить его с помощью запроса GET. Вам необходимо определить сопоставление URL-адресов для ваших ресурсов.

person kgiannakakis    schedule 05.05.2009
comment
Проблема с использованием GET заключается в том, что в IE длина URL-адреса ограничена... но у меня может быть довольно много данных, которые необходимо обработать для создания изображения... поэтому я определенно достигну максимальной длины IE ( 2048 символов я думаю... ) - person SvenFinke; 05.05.2009
comment
Также не рекомендуется использовать длинные запросы GET. Просто сделайте это в два шага. «Создайте» изображение с помощью POST-запроса. В качестве результата вернуть уникальный идентификатор. Затем выполните GET с этим идентификатором. Вы можете либо сохранить изображение во временном файле, либо сохранить параметры POST в сеансе http. - person kgiannakakis; 05.05.2009

arrow_upward
2
arrow_downward

Нет людей! У вас в основном есть 3 варианта, как я это вижу.

Способ 1 — встроенное изображение

Делайте то, что сказал Брейн, но data должно быть кодировка base64 вашего изображения.

$("#div").html(data); // instead of this
$('#image').attr('src','data:image/gif;base64,'+data); // try something like this

Но мне не нравится идея встраивания изображения или передачи данных поста. Base64 также может стать немного большим для больших изображений.

Способ 2 — сохранить изображение

Вы можете $.post данные, как и раньше, затем сохранить изображение и вернуть URL-адрес изображения.

Способ 3 — использовать ПОЛУЧИТЬ

Измените сценарий генерации изображений, чтобы он принимал GET данные. Если вам нужно передать много данных, попробуйте как-нибудь их сжать или, возможно, вы можете использовать SESSION переменных.

person mpen    schedule 23.07.2009

arrow_upward
1
arrow_downward

Я не очень уверен, правильно ли я понял то, что вы сказали, но вы можете использовать метод $.post(), который вернет все, что вам нужно, через обратный вызов. Что-то вроде этого:

$.post("file.php",{param: val},function(data){
    $("#div").html(data);
})

Если бы вы могли объяснить подробнее, может быть, мы поймем лучше. Надеюсь это поможет.

person Brayn    schedule 05.05.2009
comment
Если вам нужно отправить параметры POST (т.е. если GET не сработает в вашей ситуации), это самый разумный ответ на вашу проблему. В этом примере «данные» будут тегом изображения HTML с правильным исходным кодом изображения, возвращенным PHP. Если вам нужна дополнительная информация о том, как это работает, спросите, и я подробно расскажу о том, что опубликовал Брейн (или, если он захочет, он сможет...). - person KyleFarris; 05.05.2009

arrow_upward
0
arrow_downward

Есть ли реальная необходимость использовать AJAX/jQuery? Или вы просто вставляете это, потому что это круто?

Вот что я бы сделал:

if (isset($_POST['createImage'])){
    // This means that the button was clicked
    // Generate your image, and then display it:
}

// Regardless, you would now show your form
// That way if values were to be changed, the graphic can be recalculated.

Таким образом, вы достигаете желаемого вывода (графическая загрузка зависит от вывода формы) и одним щелчком мыши генерируете этот вывод.

person EvilChookie    schedule 23.07.2009