一般上传表单的时候有两种方式：
1：form表单内实现，指定action和 method，form标签内添加一个submit的button，点击submit实现上传功能，对任何的形式的input都可以。
2：Ajax实现上传，一般情况下我们都会选择ajax，因为这可以有更多的后续操作和选择。
var args = {
id:$('#id').val(),
name:$('#name').val()
}
$.ajax({
url:'/staff',
type:'post',
data:args，
success:function(res){
console.log(res);
},
error:function(err){
console.log(err);
}
})以上是一般形式，用的比较多。但是当我们遇到input[type=”file”]时就不知道要如何向后台传输数据了，”.val()”肯定是不行的，所以就讲到FormData这个构造函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form class="form-signin" role="form" method="post" enctype='multipart/form-data' id="formData">
<h2>上传文件</h2>
<input id="fulAvatar" name="fulAvatar" type="file" class="form-control" />
<br/>
<button id="btnSub" class="btn btn-primary" type="button">上 传</button>
</form>
</body>
<script src="/javascripts/jquery-3.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#btnSub').click(function() {
var form = new FormData(document.getElementById("formData"));
$.ajax({
url: '/staff',
type: 'post',
data: form,
processData: false, //禁止序列化data，默认为true
contentType: false, //避免JQuery对contentType做操作
success: function(res) {
console.log(res);
},
error: function(err) {
console.log(err);
}
})
})
</script>
</html>上传文件时，form标签中 method=”post”和enctype=’multipart/form-data’都是必须的
contentType 的默认值是 “application/x-www-form-urlencoded”，这里设为false，是因为我们在 form 标签中设置了enctype =“multipart/form-data”,这样请求中的 contentType 就会默认为 multipart/form-data 。而我们在 ajax 中 contentType 设置为 false 是为了避免JQuery对其操作，从而失去分界符，而使服务器不能正常解析文件。
除此之外，你还可以借助FormdData的append()方法来给data添加一些额外的数据：
var form = new FormData(document.getElementById("formData"));
form.append("slogan","suonidafahao!");当然既然可以添加 那自然可以删除，查找，遍历
form.append("staticData","suonidafahao!");
form.append("keyName","Value111111");
form.get("keyName");//Value111111
form.delete("staticData");更多方法请见[FormData]
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
