##1.前言
在网页与后台的交互中，用的最多的网络交互方式之一就是ajax，ajax 是免刷新页面就能从进行post与get方式的提交表单和获取服务端数据，但是在原先的ajax中，是不能携带文件上传的，但是由于h5里面的FormData的出现，让ajax可以直接在网页里面异步上传文件
##2.前期准备
下面代码是在jquery演示
###一、ajax的原理图
1、用户客户端发出HttpRequest Ajax请求到服务端
2、服务端做出响应，发出xml的数据交给ajax返回给用户
3、用户客户端（浏览器）接受到数据后，通过一些处理展现在客户端看
下面我们来实现用AJAX传文件
###二、FormData详解
XMLHttpRequest Level 2 添加了一个新的接口——FormData。利用 FormData 对象，我们可以通过 JavaScript 用一些键值对来模拟一系列表单控件，我们还可以使用 XMLHttpRequest 的 send() 方法来异步的提交表单。与普通的 Ajax 相比，使用 FormData 的最大优点就是我们可以异步上传二进制文件。
FormData的出现，可以减少我们一些工作量 ，向在服务端传输值的时候类似于 jquery里面的serialize
###三、FormData代码演示
在我们实际运用中，可以用以下几种方式来使用FormData
网页代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="application/javascript"></script>
//百度jquery cdn
</head>
<body>
<form id="myform" enctype="multipart/form-data">
<input type="text" name="text1" id= "text1">
<input type="text" name="text2" id= "text2">
<input type="file" name="file">
<input id="submit" type="button" name="提交">
</form>
</body>
</html>
1、实例化FormData方式
var formdata = New FormData($('#myform')[0])
//这样所有表单里面的值均在formdata属性里面
2、append拼接方式
var formdata = new FormData();
formdata.append('text1',$('#text1').val());
formdata.append('text2',$('#text2').val());
formdata.append('file',$('file').files[0]);
//这样才能得到一个formdata属性 这样很麻烦 所以我大部分都是用第一种 直接实例化出来一个formdata
还有第三种方法与第一种类似，我就不过多去讲解了。下面我用们用代码的方式来讲解formdata
##3、演示FormData 异步上传文件
html页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="application/javascript"></script>
</head>
<body>
<form id="myform" enctype="multipart/form-data">
<input type="text" name="text1">
<input type="text" name="text2">
<input type="file" name="file">
<br>
<input id="submit" type="button" name="提交" value="提交">
</form>
<script>
$('#submit').on('click',function () {
var formdata =new FormData($('#myform')[0]);//构造FormData
$.ajax({
url:'server.php',
data:formdata,
type:'post',
contentType:false, //使用正确的contentType类型 （必须） 2017.3.15号 我就是因为丢了这两个，调试了一天。。。。。。。。
processData:false,//data选项既可以包含一个查询字符串，（必须）比如 key1=value1&key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。如果使用了后者的形式，则数据再发送器会被转换成查询字符串。这个处理过程也可以通过设置processData选项为false来回避
success:function (msg) {
}
});
});
</script>
</body>
</html>
php代码
//server.php
var_dump($_FILES);
var_dump($_POST);
//我们直接把这些值打印出来证明formdata已经上传图片到服务端
效果图
拿到了这个tep_name 临时文件地址，我们就可以做相应的文件上传处理 比如move_uploaded_file 移动到一个文件夹里面去，就是响应的文件上传了。。
##结尾
在没有FormData的时候，一般都是用其他其他方式来异步上传图片，但是FormData给我们开发带来了很大的便捷性，小伙伴应该已经学会了，下次你就可以用FormData异步构造data来上传文件或者表单了。
