Ajax对于表单提交来说，是一个很好的工具，他提供了异步提交的效果，这使得用户提交表单时不需要刷新页面就可获知提交成功与否，但一直以来，网上的示例大都是JQuery上传的教程，原生Ajax似乎并不受大家热爱，更别提原生Ajax上传图片的教程了，本篇将为你讲述JavaScript中使用FormData上传文件的教程
FormData
FormData对象用以将数据编译成键值对，以便用XMLHttpRequest来发送数据。比起早先的Ajax，发送FormData的Ajax不仅可以发送图片，更好的一点是我们无需设置RequestHeader，也无需担心自己粗心写错xhr.send()中的参数。
用法
我们可以使用表单来构造一个FormData对象，也可以创建一个空的FormData对象，之后手动添加一些数据进去。
使用表单构造FormData对象。
做法很简单，使用getElementById()或querySelector()这类选择器获取表单对象，将其传入FormData的构造方法，如下：
<form id="formA" method="POST" action="/upload" enctype="multipart/form-data">
<input type="text" name="username" id="username">
<input type="file" name="pic" id="pic" multiple="multiple">
<input type="button" value="FormData提交一个Form" onclick="sub1()">
</form>
function sub1() {
let form = document.getElementById('formA');
let data = new FormData(form);
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status==200){
alert(xhr.responseText);
}
};
xhr.open('POST','/upload');
xhr.send(data)
}
空的FormData对象&添加数据
这个也很简单，添加数据方法的第一个参数是数据的名字，第二个参数是数据的值。如下：
<form id="formA" method="POST" action="/upload" enctype="multipart/form-data">
<input type="text" name="username" id="username">
<input type="file" name="pic" id="pic" multiple="multiple">
<input type="button" value="FormData添加数据后提交" onclick="sub2()">
</form>
function sub2() {
let username = document.getElementById('username');
let pics = document.getElementById('pic');
let data = new FormData();
data.append('username',username.value);
for(let pic of pics.files){
data.append('pic',pic);
}
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status==200){
alert(xhr.responseText);
}
};
xhr.open('POST','/upload');
xhr.send(data)
}
如果一个文件上传框可以上传多个文件，那么得将这些文件分别添加进FormData，注意他们的名字是一样的。
结果是一样的：
