ajax上传多文件

• 上传文件是利用FormData接口把文件对象转成二进制数据添加到表单，然后以表单数据格式发送给后端

FormData 详解

FormData 接口提供了一种表示表单数据的键值对(key, value)的构造方式，并且可以轻松的将数据通过XMLHttpRequset.send()方法发送出去，如果表单enctype属性设置了multipart/form-data属性，则可以使用表单的submit()方法发送数据，发送具有同样格式的数据。

FormData 构造函数

// 构建 FormData 对象
var formData = new FormData()

// 使用 FormData.append() 方法，添加键值对到表单里面
formData.append(key, value)

• FormData.append(key, value) 如果指定key键已存在，则append()方法会把新值添加到已有值集合后面

上传单个文件

• html

• js

// 上传文件监听事件
document.getElementById('file').addEventListener('change', function(){
  // 获取文件对象
  var file = this.files[0]
  // 构建FormData对象
  var formData = new FormData()
  // FormData.append()方法会把文件对象转成二进制数据，并添加到表单
  formData.append('file' file)
  
  // 创建 XMLHttpRequest 对象发送数据
  var xhr = new XMLHttpRequest()
  // 初始化HTTP请求参数(请求方式,url, 默认异步async=true)
  xhr.open('post', 'url...' )

  /* ajax 会根据发送数据，自动设置对应contentType,所以不需要我们手动设置
    设置请求头的contentType
    xhr.setRequestHeader("Content-type","multipart/form-data");
  */

  // 监听上传进度
  xhr.upload.onprogress = function(event){
    var percent = (event.loaded / event.tatol) * 100 + '%'
    console.log(percent)
  }
  // 发送数据
  xhr.send(formData)

  // 监听请求响应事件
  xhr.onreadystatechange = function(){
    if(xhr.readystate == 4 && xhr.status == 200){
      console.log(请求成功)
    }
  }
})

上传多个文件

• html

• js

// 上传文件监听事件
document.getElementById('files').addEventListener('change', function(){
  // 获取文件对象列表
  var files = this.files
  // 构建FormData对象
  var formData = new FormData()
  // FormData.append()方法会把文件对象转成二进制数据，并添加到表单
  /* FormData.append(key, value) 如果指定key键已存在，
     则append()方法会把新值推送到已有值集合里面 */
  // 遍历把文件对象添加到表单指定键 files 集合里面
  for(var i=0; i