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

最新推荐文章于 2025-06-08 09:05:25 发布

原创最新推荐文章于 2025-06-08 09:05:25 发布 · 1.2w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #formdata #php #jquery #json

ajax与php后台交互专栏收录该内容

7 篇文章

订阅专栏

本文介绍如何使用HTML5的FormData对象实现文件上传功能，并探讨通过JavaScript获取文件名的方法及与PHP后台交互的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

可能孤陋寡闻，现在才知道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协议的关系，自行百度，如果上传的有文件，那么只能设置为false
             
             success: 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;
	
?>

结果：