jquery的$.ajax()利用FormData数据类型与php后台交互

可能孤陋寡闻，现在才知道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;?>

结果：

jquery的$.ajax()利用FormData数据类型与php后台交互相关推荐

利用jquery操作ajax,利用jquery对ajax操作，详解原理（附代码）
1.jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector ...
ajax利用FormData、FileReader实现多文件上传php获取
一.FormData方式前台代码(注意,不需要用到form标签): a. html部分: b. js部分: c. 完整代码: <!DOCTYPE html> <html lang= ...
php处理form多文件上传,ajax利用FormData、FileReader实现多文件上传php获取
前台代码(注意,不需要用到form标签): a. html部分: b. js部分: c. 完整代码: function loadDoc(file,data,async=true){ if(window ...
Ajax发送formdata数据，SpringMVC后台处理
撸了今年阿里.头条和美团的面试,我有一个重要发现.......>>> 前端js: var submit_data = new FormData(); var name = $(&qu ...
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
jquery通过ajax方法获取json数据不执行success
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
ajax的同步,设置JQuery的Ajax方法同步
如何设置jquery的ajax方法为同步 jax请求默认的都是异步的如果想同步 async设置为false就可以(默认是true) var html = $.ajax({ url: "so ...
jquery ajax 不执行success,jQuery通过ajax方法获取json数据不执行success的原因及解决方法...
1.jquery通过ajax方法获取json数据不执行success回调问题描述:jquery通过ajax方法获取json数据不执行success回调方法问题原因:json格式存在问题或不符合标准 ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...

jquery的$.ajax()利用FormData数据类型与php后台交互

jquery的$.ajax()利用FormData数据类型与php后台交互相关推荐

最新文章

热门文章