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

Question

В настоящее время я работаю над классом, который генерирует диаграммы в виде картинок с помощью 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" />

Answer 1

HTTP-запросы POST не предназначены для возврата ресурсов. Почему вы не используете запрос GET? 'REST' способ сделать это будет создать изображение с запросом POST и затем загрузить его с запросом GET Вам необходимо определить сопоставление URL для своих ресурсов.

Answer 2

Нет людей! В принципе, у вас есть 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

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

Answer 3

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

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

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

Answer 4

Есть ли необходимость использовать 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.

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