可能孤陋寡闻,现在才知道MDN的存在:/zh-CN/
的MDN全名容易理解他是什么意思:MDN Web Docs
好了,自行学习,上一篇讲了jquery的$.ajax()利用json数据类型与php后台交互
那么从MDN上了解到,原来html5中表单数据除了用json数据类型来传给后台,还可以用FormData数据类型来进行传递,而且FormData还加入了文件数据类型的传递。有利于ajax与php后台的文件上传。
先来看看MDN是怎么描述FormData的:/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="/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;?>
结果: