js dom 上传图片

要使用JavaScript DOM上传图片，可以使用HTML5的File API和XMLHttpRequest对象。以下是一个示例：

HTML部分：

<input type="file" id="uploadInput">
<button onclick="uploadImage()">上传图片</button>

JavaScript部分：

function uploadImage() {
  var input = document.getElementById('uploadInput');
  var file = input.files[0];
  
  // 创建FormData对象
  var formData = new FormData();
  formData.append('image', file);
  
  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  
  // 设置请求的处理函数
  xhr.onload = function() {
    if (xhr.status === 200) {
      // 上传成功
      console.log(xhr.responseText);
    } else {
      // 上传失败
      console.log('上传失败');
    }
  };
  
  // 发送请求
  xhr.open('POST', 'upload.php', true);
  xhr.send(formData);
}

在这个示例中，当用户选择文件并点击“上传图片”按钮时，会触发uploadImage函数。函数中首先获取<input type="file">元素，并获取用户选择的文件。然后创建一个FormData对象，并将文件添加到该对象中。

接下来，创建一个XMLHttpRequest对象，并设置onload事件处理函数。在这个函数中，我们可以检查服务器的响应状态，如果状态码是200，表示上传成功，可以通过xhr.responseText获取服务器返回的内容。

最后，使用xhr.open方法打开一个POST请求，并发送FormData对象。请注意，这里的upload.php是一个服务器端的文件上传处理脚本，你需要根据自己的情况来替换成正确的URL。

这就是使用JavaScript DOM上传图片的基本步骤。当然，你还可以根据自己的需求对代码进行扩展和优化。