我正在为后端图像编辑过程构建一个前端界面（不知道所有正确的行话） .

基本上：

  • 用户应该能够通过UI上传图像文件

  • 将其发送到服务器

  • 以某种方式编辑图像

  • 然后UI应显示已编辑的图像

我正在使用带有 POST 方法的XHR请求，如下所示将图像文件发送到服务器 .

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>

My question is ：一般情况下，一旦将图像文件发送到服务器，通过上面的代码， when/how does the edited image get sent back ？

  • 它会作为服务器响应的一部分发送回我的 POST 请求，因此可以在我的 processRequest 回调函数中访问（假设服务器配置为以这种方式处理它）？

  • 我是否必须发送 GET 请求才能获取已编辑的文件？

此时我无法访问服务器/后端，只知道UI应该如何工作 .

javascript ajax image file-upload httpresponse