Редактировать и отправить обратно файл изображения
Я создаю интерфейс переднего плана для процесса редактирования изображения на заднем плане (не знаю всего правильного жаргона).
В принципе:
- пользователь должен иметь возможность загружать файл изображения через пользовательский интерфейс
- который отправляет его на сервер
- где изображение редактируется каким-то образом
- тогда пользовательский интерфейс должен отображать отредактированное изображение
Я использую запрос XHR с POST
метод, как показано ниже, чтобы отправить файл изображения на сервер.
var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('upload-button');
uploadButton.onclick = function() {
this.innerHTML = 'Uploading...';
//---------------
var files = fileSelect.files
var formData = new FormData();
var file = files[0]
if (file.type.match('image.*')) {
formData.append('photos[]', file, file.name);
}
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://httpbin.org/post', true);
xhr.onload = function() {
if (xhr.status === 200) {
uploadButton.innerHTML = 'Upload';
}
else {
alert('An error occurred!');
}
};
xhr.send(formData);
}; //end on-click 'Upload'
<input type="file" id="file-select" name="photos[]"/>
<button type="submit" id="upload-button">Upload</button>
Мой вопрос: как правило, после отправки файла изображения на сервер с помощью приведенного выше кода, когда / как отредактированное изображение отправляется обратно?
- Будет ли оно отправлено обратно как часть ответа сервера на мой
POST
запрос, и, следовательно, доступны в моемprocessRequest
функция обратного вызова (при условии, что сервер настроен на такую обработку)? - Должен ли я отправить
GET
запросить получение отредактированного файла?
У меня нет доступа к серверу / бэкэнду в данный момент, и я просто знаю, как должен работать пользовательский интерфейс.