XMLHttpRequest上传文件

使用XMLHttpRequest对象可以实现文件上传功能。首先，需要创建一个FormData对象，并通过append方法将文件数据添加到FormData中。然后，创建一个XMLHttpRequest对象，并使用open方法指定请求的方法和地址。接下来，使用send方法发送请求，并通过onreadystatechange事件监听请求的状态变化。当readyState为4且status为200时，表示上传成功，可以获取返回的结果并进行展示。同时，可以通过监听xhr.upload的onprogress事件来显示文件上传的进度。

具体代码如下所示：
1. 创建一个input元素和一个提交按钮：

<div class="container">
  <input type="file" name="doc" id="doc">
  <button type="submit" id="submit">提交</button>
  <br />
  <!-- 显示上传的图片 -->
  <img src="" alt="" id="img">
</div>

2. 监听提交按钮的点击事件，获取上传的文件并进行上传：

var doc = document.querySelector('#doc');
var subbtn = document.querySelector('#submit');
subbtn.addEventListener('click', function (e) {
  // 获取上传的文件,数组
  let filedata = doc.files;
  //先判断是否已经上传文件
  if (filedata.length <= 0) {
    return alert('请上传文件');
  }
  //通过FormData可以获取表单数据，也可以通过append添加数据，最后把FormData实例对象直接上传发送请求
  let fd = new FormData();
  fd.append('img', filedata