- 上传文件是利用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
<input type='file' name='file' id='file'>
- 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
<!-- 上传多个文件input需要添加 multiple 属性 -->
<input type='file' multiple name='files' id='files'>
- 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<files.length; i++){
formData.append('files' files[i])
}
// 创建 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(请求成功)
}
}
})
