Как отправить, созданное пользователем изображение, на сервер с помощью js, ajax или fetch()?

Question

[Anton05]

Добрый день. Возникла такая проблема: 1) Пользователь рисует картинку в canvas, программа преобразует его в картинку(png). Надо чтобы данная картинка без перезагрузки странички отправлялась на сервер, чтобы потом можно было открывать её на странице сайта с помощью ссылки.
2) Пользователь записывает аудио. Оно отправляется на сервер без перезагрузки странички и потом также можно было обращаться к данному аудиофайлу по ссылке.
Прошу объяснить и предоставить код.
Спасибо!!!

Comments

[FanatPHP]

Так вопросы не задают.
Здесь не справочная служба, и не колледж, где тебе все обязаны рассказать и "предоставить".

Здесь могут помочь. Тому, кто сам что-то пытался сделать.
Для начала поиском в интернете.

[Павел Корнилов]

Прошу объяснить и предоставить код.

Да че там просить? Требовать нужно! =)
fetch -- это и есть обертка для ajax.

[Вадим]

Павел Корнилов, Обёртка? Скорее это имплементация определённой технологии. А обёртка она, пожалуй, для XMLHttpRequest

[Павел Корнилов]

Вадим, да, я примерно это и имел в виду. Поскольку только появление XMLHttpRequest позволило реализовать в JS асинхронную связь с сервером.

[Вадим]

Павел Корнилов, Просто среди самоучек-новичков бытует мнение что ajax не существует без Jquery или любой другой библиотеки, предоставляющей такую функцию. И судя по тому, как автор задал вопрос - он этого как раз не понимает. Что есть ajax, а что fetch. Поэтому решил уточнить, гляди и автор начнёт понимать чуточку больше :-)

[Павел Корнилов]

Вадим, таким нужно больше читать. Я не рассматриваю аудиторию из серии "я пишу только в JQuery" как программистов. Это обычные пользователи, которые решили себе в проект поставить модную анимашку. Поэтому подробно им объяснять - смысла нет.
Когда есть время, и я понимаю вопрос, стараюсь давать в таких случаях готовое решение. Так быстрее получается.

[Вадим]

Павел Корнилов, нууу тут конечно дело Ваше, однако, все с чего-то начинали. И Jquery хороший проводник для начинающих. Куча готовых решений, документации, всё относительно легко и быстро.

А потом через n-времени ловишь себя на том, что занимаешься оптимизацией сборки вебпака\тришейкингом\ui китом\изучаешь виртуал дом и тд и тп и думаешь.. как же я докатился до такой жизни xD

[wisgest]

Поскольку только появление XMLHttpRequest позволило реализовать в JS асинхронную связь с сервером.

Павел Корнилов, нет, классика — скрытый iframe. И даже, например, <img> позволяет организовать обратную связь с сервером без перезагрузки страницы.

[Павел Корнилов]

wisgest, да, такие транспорты тоже делали. Но они были довольно костыльными. Хотя да, работали.

Answer 1

[zkrvndm]

Я уже отвечал на похожий вопрос. Вот здесь в ответах приведена функция для отправки блобов на сервер:
Как получить audio файл с сайта?

Если же дело касается изображений, то дополнительно изучите как получить Blob при помощи Canvas:
https://learn.javascript.ru/blob#izobrazhenie-v-blob

Comments

[Anton05]

Здравствуйте ещё раз. Скажите а в этом коде что можно подразумевать под url.
function send_blob_to_server(blob, url) {

var formData = new FormData();
formData.append('file', blob, blob.name);

var xhr = new XMLHttpRequest();
xhr.open('POST', url);

xhr.onreadystatechange = function() {
if (xhr.readyState === XMLHttpRequest.DONE) {
if (xhr.status === 200) {
alert('Запрос выполнен успешно, ответ сервера: ' + xhr.responseText);
}
else {
alert('При выполнении запроса произошла неизвестная ошибка!');
}
}
}

xhr.send(formData);

}

// Для использовани функции первым параметром передаете Blob,
// а вторым параметром адрес куда надо отослать ваш Blob:
send_blob_to_server(audioBlob, 'Как получить audio файл с сайта?');

Это ссылка на php-файл на котором обрабатывается запрос или что?

[zkrvndm]

Anton05, да, указывайте ссылку на php-обработчик.

[Anton05]

Надим Закиров, И в php-файле просто писать move_uploaded_file($_FILES['upfile']['tmp_name'], $destiation_dir ) и т.д.?
Можно создать blob из canvas путём как audio blob.

const blob = new Blob(canvas, {
type: 'image/png'
});

[zkrvndm]

Anton05, по второй ссылке есть пример, как получил Blob из изображения, читайте внимательнее. Насчет move_uploaded_file все верно. С точки зрения php вы отправляйте обычный файл, это в браузере он blob, а на стороне php ничем не отличается от любого другого файла, отправленного через форму.