XMLHttpRequest上传文件

页面结构

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

1、先验证是否已上传文件

2、给FormData添加数据

3、发起请求

      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[0])

        
        const xhr = new XMLHttpRequest()
        xhr.open('POST', 'http://www.liulongbin.top:3006/api/upload/avatar')
        xhr.send(fd)

        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status === 200) {
            console.log('上传成功');

         //接收返回的结果并展示出来
            var data = JSON.parse(xhr.responseText)
            if (data.status === 200) {
              document.querySelector('#img').src = 'http://www.liulongbin.top:3006' + data.url
            }
          }
        }


      })

显示文件上传进度

e.lengthComputable 是个布尔值，表示当前上传资源是否为可计算长度。

e.loaded 已传输的字节

e.total 总需传输字节

//监听文件上传（xhr.upload）进度 
xhr.upload.onprogress = function (e) {
          if (e.lengthComputable) {
            let percentage = Math.ceil(e.loaded / e.total * 100)
            console.log(percentage + '%');
          }
        }