FormData对象，是可以使用一系列的键值对来模拟一个完整的表单，然后使用XMLHttpRequest发送这个"表单"。从而实现文件的上传
一、FormData对象的构造
1、创建一个FormData空对象,然后通过append()方法添加数据
FormData formData = new FormData();
formData.append("username",username);
formData.append("password",password);
2、通过已有的表单来初始化一个对象实例
formData里面存储的数据形式，一对key/value组成一条数据，key是唯一的，一个key可能对应多个value。如果是使用表单初始化，每一个表单字段对应一条数据，它们的HTML name属性即为key值，它们value属性对应value值。
<form id="form" enctype="multipart/form-data" method="post">
用户名：<input id = "username" type="text" name="username"><br/><br/>
密码：<input id = "password" type="text" name="password"><br/><br/>
<input id = "file" type="file" name="file"><br/><br/>
<input type="button" value="提交" id="fileUpload">
</form>
//获取页面已有的一个form表单来初始化
var formData = new FormData($("#form")[0]);
//获取表单中的字段
var username = formData.get("username");
var password = formData.get("password");
onsole.log("username"+username+",password"+password);
//在此基础上，添加其他数据
formData.append("age",100);
formData.append("sex","man");二、方法
1、获取值 ---通过get(key)/getAll(key)来获取对应的value，
formData.get("username"); // 获取key为name的第一个值
formData.getAll("username"); // 返回一个数组，获取key为name的所有值2、添加值---append(key,value);，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值
formData.append("username",username);
formData.append("password",password);
formData.append("age",100);
formData.append("sex","man");3、修改值---set(key, value)来修改数据，如果指定的key不存在则会新增一条，如果存在，则会修改对应的value值
formData.append("username", "佛顶山");
formData.set("username", "破壳");
formData.getAll("username"); //破壳4、删除值---delete(key)，来删除数据
formData.append("username", "梵蒂冈");
formData.delete("username");
formData.getAll("username"); //[]5、判断数据是否存在---has(key)来判断是否对应的key值
formData.append("username1", "佛顶山");
formData.append("username2", "破壳");
formData.has("username1"); //true
formData.has("username2"); //true
formData.has("username3"); //false三、遍历
规则：
每调用一次next()返回一条数据，数据的顺序由添加的顺序决定
返回的是一个对象，当其done属性为true时，说明已经遍历完所有的数据，这个也可以作为判断的依据
返回的对象的value属性以数组形式存储了一对key/value，数组下标0为key，下标1为value，如果一个key值对应多个value，会变成多对key/value返回
formData.append("username1", "佛顶山");
formData.append("username2", "破壳");
formData.append("username3", "翻滚吧");
formData.append("username4", "凤凰飞天");
var ent = formData.entries();
ent.next(); //{done:false, value:["username1", "佛顶山"]}
ent.next(); //{done:false, value:["username2", "破壳"]}
ent.next(); //{done:false, value:["username3", "翻滚吧"]}
ent.next(); //{done:false, value:["username4", "凤凰飞天"]}
ent.next(); //{done:true, value:undefined}四、上传示例(下载的js代码就是一个ajax请求然后后台处理一下就可以了，这里就省略了)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<form id="form" enctype="multipart/form-data" method="post">
上传用户：<input id = "username" type="text" name="username"><br/><br/>
上传文件：<input id = "file" type="file" name="file"><br/><br/>
<input type="button" value="提交" id="fileUpload">
</form>
</body>
<script type="text/javascript">
console.log("-------------");
$("#fileUpload").click(function(){
//获取上传文件
var uploadFile = $("#file")[0].files;
// 用表单来初始化
var formData = new FormData($("#form")[0]);
if (uploadFile.length > 0) {
//获取上传的用户名
var username = $("#username").val();
//往formData对象中存值
console.log("username:"+username+",uploadFile"+uploadFile);
$.ajax({
type: 'POST',
url:"http://localhost:8080/fileUpload/fileUpload",
data:formData,
async: true, // 默认是true，即为异步方式
cache: false, //是否在缓存中读取数据的读取。(false 每次读取的是最新的数据)
contentType: false, // 告诉jQuery不要去设置Content-Type请求头
processData: false, // 告诉jQuery不要去处理发送的数据
timeout: 0, //async必须设置为async:ture，timeout才生效；(默认的timeout为0，代表永不超时)
success:function(data){
alert("上传成功");
},
error:function(){
alert("未知的错误");
}
})
}else {
alert("选择的文件无效！请重新选择");
}
})
</script>
</html>五、上传文件查询
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>
<input id="search" type="button" name="search" value="查找">
</body>
<script type="text/javascript">
$("#search").click(function(){
console.log("***************************************");
$.ajax({
type: 'POST',
url:"http://localhost:8080/fileUpload/fileSearch",
data:{
'username':'小明',
},
async: true, // 默认是true，即为异步方式
cache: false, //是否在缓存中读取数据的读取。(false 每次读取的是最新的数据)
success:function(data){
console.log(data);
alert("查询成功");
},
error:function(){
alert("未知的错误");
}
})
})
</script>
</html>
这篇文章可以和我的另一篇Java文件上传下载一同使用：https://blog.csdn.net/little__SuperMan/article/details/82897757