ajax上传文件，使用formData与fileReader

<form action="" enctype="multipart/form-data">
    <input type="file" id="file" onchange="addFile()">
</form>

添加multiple属性，就可上传多个文件

function addFile(){
  let fileObj = document.getElementById("file").files[0];
  let formData = new FormData();
  formData.append("file", fileObj);
  let request = new XMLHttpRequest();
  request.open("POST", /upload);
  request.onloadstart = function () {   //上传前执行
      console.log('我要开始上传了')  
  }
  request.onabort = function () {      //上传中断执行
       alert("文件上传中断,请重试")
  };
  request.onprogress = function (event) {  // 会在上传完成前周期执行，可以用来做进度条
       console.log((event.loaded / event.total) * 100)        
  };  
  request.onerror = function () {      //上传错误执行
       alert("文件上传出错，请重试")
  };
  request.onload = function () {        //上传成功执行
       alert("上传完成!");
  };
  request.send(formData);
},

console.log(formData.get('file'));  //可以查看文件所包含属性

     以音乐MP3音乐文件为例

也可以使用fileReader读取图片文件然后上传图片

 function addFile() {
        let imgcode = document.getElementById("file").files[0];
        var reader = new FileReader();
        let request = new XMLHttpRequest();
        reader.readAsDataURL(imgcode);      //将二进制文件转化为Base64格式
        reader.onload = e => {
            request.open("POST", "/upload");
            request.onload = function () {
                alert("上传完成!");
            }; 
            request.send(e.target.result);
        }
    }

图片文件会被编码为base64格式

如果文件很大，需要分段上传，可以采用blob分割大文件上传，当然也需服务端配合

  let fileReader = new FileReader();
  let file = document.getElementById("file").files[0];
  let request = new XMLHttpRequest();
  const ONE_MB = 1024 * 1024;
  let sendedBytes = 0;
  fileReader.onload = function() {
    request.open();
    request.send(this.result);
    sendedBytes += ONE_MB;
    if(sendedBytes < file.size) {
      let blob = file.slice(sendedBytes, sendedBytes + ONE_MB);
      fileReader.readAsArrayBuffer(blob);
    }
  }
  let blob = file.slice(0, ONE_MB);
  fileReader.readAsArrayBuffer(blob);