接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写，这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果，主要用到了jQuery的ajax()方法和XMLHttpRequest Level 2的FormData接口。关于FormData，大家可以看MDN文档。
1，先看效果图
期望的功能和效果很简单：点击页面中的上传文件表单控件，选择文件后点击“ajax提交”，将文件上传至服务器，上传成功后，页面给出一个简单的提示。
2，前端的代码
看下html代码：
<div class="box">
<div>
<div class="item">
<input type="file" name="myfile" style="font-size: 0.7rem;">
</div>
<div class="item">
<button type="button" style="display: block; padding: 4px 18px;" class="btn-default">ajax提交</button>
</div>
<div class="item">
<button type="submit" style="display: block; padding: 4px 18px;" class="btn-default">form提交</button>
</div>
</div>
<div class="prompt" style="font-size: 0.7rem;"></div>
</div>
<script src="../../js/jquery-3.1.0.min.js"></script>
<script src="upload01.js"></script>代码很简单，需要注意的是页面中没有用到form表单，那么怎么提交数据呢，答案是用FormData来模拟表单中的 <input type=”file” name=”myfile”> 控件。另外，页面中的样式没有写出来。下面来看下html中引入的upload01.js代码，这个是重点。
upload01.js代码：
$(function($) {
$('input[name=myfile]').on('change', function(e) {
$('button[type=button]').on('click', function(e) {
var formData = new FormData();
// formData.ppend(name, element);
formData.append('myfile', $('input[name=myfile]')[0].files[0]);
$.ajax({
url: 'upload.php',
method: 'POST',
data: formData,
contentType: false, // 注意这里应设为false
processData: false,
cache: false,
success: function(data) {
if (JSON.parse(data).result == 1) {
$('.prompt').html(`文件${JSON.parse(data).filename}已上传成功`);
}
},
error: function (jqXHR) {
console.log(JSON.stringify(jqXHR));
}
})
.done(function(data) {
console.log('done');
})
.fail(function(data) {
console.log('fail');
})
.always(function(data) {
console.log('always');
});
});
