如何通过ajax post请求将照片从客户端发送到服务器？-解网

问：

在我的网站上，客户可以上传照片进行处理（裁剪或选择照片色调的颜色），因此，我希望在选择各种参数时，立即显示上传照片上的更改。为此，我想使用 ajax - 将带有所选参数的照片发送到服务器并返回处理后的照片。但是我遇到了一个问题 - 如何将这张照片传递给ajax post请求的参数？

借助这样的标签，用户上传了一张照片 - . 之后，我使用 js 将这张照片放在 img 标签中。<input type="file" id="imageInput" accept="image/*">

然后，当用户选择照片选项时，我向服务器发出ajax post请求 -

const image = document.getElementById('imageInput');

function ajaxSend(url, data) {
    fetch(`${url}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: JSON.stringify(data),
    })
        .then(response => response.json())
        // .then(json => render(json))
        .catch(error => console.error(error))
}

const colorTone = document.getElementById('ColorToneImg');

colorTone.addEventListener('change', function (e) {
    let selectedColor = e.target.value;
    let url = colorTone.getAttribute('data-action');
    let data = {
        'img': image.files[0],
        'color_tone': selectedColor
    }
    ajaxSend(url, data);
});

我正在html文档中寻找适当的标签（输入），并试图从中获取照片并发送照片，但没有任何效果。我还试图以某种方式从 img 标签中获取照片，但没有任何效果。

这就是数据进入服务器的结果 -<QueryDict: {'{"img":{},"color_tone":"green"}': ['']}>

我希望照片也会来到服务器，但我不知道如何实现它。任何帮助将不胜感激。谢谢！

JavaScript HTML AJAX 图像发布

const image = document.getElementById('imageInput');
const colorTone = document.getElementById('ColorToneImg');

function ajaxSend(url, data) {
  fetch(url, {
    method: 'POST',
    body: data,
  })
  .then(response => response.json())
  .catch(error => console.error(error))
}

colorTone.addEventListener('change', function(e) {
  let selectedColor = e.target.value;
  let url = e.target.getAttribute('data-action');

  const data = new FormData();
  data.append('image', image.files[0]);
  data.append('color_tone', selectedColor);

  ajaxSend(url, data);
});

上一个：如何使用fetch或ajax编辑模型（用户）字段“全局”？

下一个：发布/获取请求不起作用（AJAX、Flask）

如何通过ajax post请求将照片从客户端发送到服务器？

How to send a photo from the client to the server via an ajax post request?

评论