ajax post 提交图片【示例代码】

使用Ajax post提交图片可以通过FormData对象来实现。FormData对象是用于在发送XMLHttpRequest请求时，以键值对的形式来构建表单数据的。

示例代码如下：

// 创建一个FormData对象
var formData = new FormData();
// 获取图片文件
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
// 将图片文件添加到FormData对象中
formData.append('image', file);
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 设置请求的方法、URL和异步标志
xhr.open('POST', 'http://example.com/upload', true);
// 监听上传进度
xhr.upload.onprogress = function(event) {
  if (event.lengthComputable) {
    var percentComplete = (event.loaded / event.total) * 100;
    console.log('上传进度：' + percentComplete + '%');
  }
};
// 监听请求完成事件
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log('图片上传成功');
  } else {
    console.log('图片上传失败');
  }
};
// 发送请求
xhr.send(formData);

在上述示例代码中，首先创建了一个FormData对象，并通过`append`方法将图片文件添加到FormData对象中。然后，创建了一个XMLHttpRequest对象，并使用`open`方法设置请求的方法、URL和异步标志。接着，通过监听`upload.onprogress`事件可以获取上传进度。通过监听`onload`事件可以在请求完成后进行相应的处理，如判断请求是否成功。

需要注意的是，示例代码中的URL需要替换为实际的上传图片的接口地址。示例代码中的`fileInput`是一个input元素，用于选择图片文件的输入框，需要根据实际情况进行相应的调整。