可能孤陋寡闻，现在才知道MDN的存在：https://developer.mozilla.org/zh-CN/
的MDN全名容易理解他是什么意思：MDN Web Docs
好了，自行学习，上一篇讲了jquery的$.ajax()利用json数据类型与php后台交互
那么从MDN上了解到，原来html5中表单数据除了用json数据类型来传给后台，还可以用FormData数据类型来进行传递，而且FormData还加入了文件数据类型的传递。有利于ajax与php后台的文件上传。
先来看看MDN是怎么描述FormData的：https://developer.mozilla.org/en-US/docs/Web/API/FormData
//构造函数
var formdata = new Formdata();
使用FormData的接口主要是键（name）和值（value）
那么好了，构造完FormData了，其实其方法主要是FormData.append();插入元素，添加键和值，但是也需要注意
FormData.append()和FormData.set()的区别。
// append()两个重载函数
formData.append(name, value);
formData.append(name, value, filename);FormData.append()：如果键已经存在，不断使用append()会将新值添加到已有的值集合后面
FormData.set()：如果键已经存在，set()会将新值覆盖掉原来的值
FormData.append()中filename可有可无，但是name和value就必须要有。
MDN中讲到value值可以是Blob和File类型的值，File好理解；Blob（binary large object)），通俗点讲就是大的二进制对象，可以是图片、音频，而且BLOB常常是数据库中用来存储二进制文件的字段类型，例如mysql数据库。
好了，讲完那么多，直接实践
先试一波水，其实想找上传文件，然后获取文件名；但是想着先确认能不能直接在js中获取文件名，结果很出乎意料，js好像没有特定的函数可以直接获取文件名的，情急之下，唯有采取路径名来进行分解。
文件：<input type="file" name="file" id="file"><br> //html代码//js代码var file = $("#file").val(); //获取文件路径名console.log(file);var index = file.lastIndexOf("\\"); //最后一个匹配转义字符'\\'的索引位置console.log(index);console.log(file.substring(index+1)); //获取最后'\\'的后面字符串便是文件名
结果：Chrome的结果，说是为了安全隐藏了文件路径，用了个fakepath代替
无语后，用了Edge试试，行了
没关系，反正php有一个特定函数可以获取文件名：basename()
index.html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><!--利用cdn添加js和css库 --><script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script></head>
<body style="text-align: center; padding: 100px;">姓名： <input type="text" name="name" id="yourName" /><br>年龄： <input type="text" name="age" id="yourAge" /><br>性别： <input type="text" name="sex" id="yourSex"><br>文件：<input type="file" name="file" id="file"><br><button id="send">提交</button>
<br><br><br><br><div id="result">结果：</div>
</body> <script type="text/javascript">$(function () {$("#send").click(function () {var name = $("#yourName").val();var age = $("#yourAge").val();var sex = $("#yourSex").val();var file = $("#file").val(); //获取文件路径名console.log(file);var index = file.lastIndexOf("\\"); //最后一个匹配转义字符'\\'的索引位置console.log(index);console.log(file.substring(index+1)); //获取最后'\\'的后面字符串便是文件名var formData = new FormData();formData.append('name',name);formData.append('age',age);formData.append('sex',sex);formData.append('file',file);$.ajax({type: "POST",url: "server.php", //同目录下的php文件data:formData,dataType:"json", //声明成功使用json数据类型回调//如果传递的是FormData数据类型，那么下来的三个参数是必须的，否则会报错cache:false, //默认是true，但是一般不做缓存processData:false, //用于对data参数进行序列化处理，这里必须false；如果是true，就会将FormData转换为String类型contentType:false, //一些文件上传http协议的关系，自行百度，如果上传的有文件，那么只能设置为falsesuccess: function(msg){ //请求成功后的回调函数$("#result").append("你的名字是"+msg.name+"，性别："+msg.sex+"，年龄："+msg.age+"，上传的文件名："+msg.file);}});})})</script></html>
server.php代码
<?php$username = $_POST['name']; //获取索引$age = $_POST['age'];$sex = $_POST['sex'];$file = basename($_POST['file']); //php的basename() 方法可获取文件名$json_array = array('name'=>$username,'age'=>$age ,'sex'=>$sex,'file'=>$file ); //转换成数组类型$json= json_encode($json_array); //将数组转换成json对象echo $json;?>
结果：
