<form action="/demo/upload" method="post" enctype="multipart/form-data">
  <input type="file" name="file" id="file" multiple />
  <button type="submit" id="upload">上传</button>
</form>
<div id="filelist"></div>

<script>
  function $(selector) {
    return document.querySelector(selector);
  }
  var uploadEl = $("#upload");
  var filelistEl = $("#filelist");
  var fileEl = $("#file");

  uploadEl.addEventListener("click", function (e) {
    e.preventDefault();

    var xmlhttp;
    if (window.XMLHttpRequest) {
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
    } else {
      // code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("POST", "/demo/upload", true);
    // 这里不需要自己加，会自己处理
    // xmlhttp.setRequestHeader("Content-Type", "multipart/form-data");

    if (xmlhttp.upload) {
      //监听上传属性的上传事件,每次上传事件都会执行 progressHandlingFunction
      xmlhttp.upload.addEventListener(
        "progress",
        function (evt) {
          var loaded = evt.loaded;
          var tot = evt.total;
          var per = Math.floor((100 * loaded) / tot); //已经上传的百分比
        },
        false
      );
      //xmlhttp.upload.progress = function(){}            也可以
    }

    var formData = new FormData();
    for (let i = 0; i < fileEl.files.length; i++) {
      const file = fileEl.files[i];
      formData.append("file", file);
    }
    xmlhttp.send(formData);

    xmlhttp.onreadystatechange = function () {
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        // console.log(xmlhttp.responseText);
        alert("success");
      }
    };
  });
</script>