formData-上传进度

目的：为了看上传进度，不看上传完成后怎么了！

  let form = document.querySelector("form");
  let info = document.querySelector(".info"); //百分数
  let bar = document.querySelector(".bar");   // 进度条


  form.onsubmit = function(e) {
    e.preventDefault();

    // 2.收集表单数据：大段文字 和 文件（图片、视频、压缩包）
    let fd = new FormData(this);


    let xhr = new XMLHttpRequest();
    xhr.open("post", "http://www.liulongbin.top:3006/api/upload/avatar");


    // 上传进度事件：必须放在xhr.send();语法规定
    xhr.upload.onprogress = function(e) {
      // e.lengthComputable  文件是否正在上传
      // e.loaded            已经上传的大小
      // e.total             文件的总大小
      let numb = e.loaded / e.total * 100;
      info.innerText = numb.toFixed(2) + "%";

      // 设置：计算结果设置宽度 %
      bar.style.width = numb.toFixed(2) + "%"
    }




    xhr.send(fd); // 发送请求，展示请求完成和状态！

  }

标签：info,formData,xhr,let,进度,numb,document,上传
来源： https://blog.csdn.net/weixin_49405038/article/details/114231386