jQuery的$.ajax()与php后台交互，进行文件上传并保存在指定目录

最新推荐文章于 2024-07-15 15:38:12 发布

C-Jun

最新推荐文章于 2024-07-15 15:38:12 发布

阅读量7.7k

点赞数 7

分类专栏： ajax与php后台交互文章标签： ajax php 文件上传服务器 FormData

本文链接：https://blog.csdn.net/ccccc_Jun/article/details/79140721

版权

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

7 篇文章 1 订阅

订阅专栏

不得不说，太孤陋寡闻了，上一篇jquery的$.ajax()利用FormData数据类型与php后台交互写到JavaScript没有特定函数获取文件名，现在要打脸了，看人家怎么说的：https://www.codexworld.com/how-to/get-file-info-name-size-type-javascript/

Before sending the file to the server for upload, it always a good idea to validate the file. Using JavaScript you can easily get the file info and validate in client-side. The following single line of javaScript code, help you to get the file name, size, type, and modified date

//DOM对象的FileUpload对象
var fileName = document.getElementById('file').files[0].name //文件名

var fileSize = document.getElementById('file').files[0].size  //文件大小

var fileType = document.getElementById('file').files[0].type  //文件类型

var fileModifiedDate = document.getElementById('file').files[0].lastModifiedDate //文件最近修改日期

本来一直都是直接使用jQuery来获取元素id的，所以上面那句话我想着下面这行jQuery代码来代替

var file = $("#file").files[0];//错误操作，为了演示用

但是我发现会报错，然后说是

DOM对象的方法jQuery对象是不能使用的。

然后找了大半天想知道jQuery对象和DOM对象的区别

DOM对象我觉得用以下的HTML DOM Tree来描述会好理解一下。

而Jquery对象我想会比较好理解一点，或者自行百度。W3School里面有讲到jQuery的DOM元素方法，

所以我就想着JQuery对象转化为DOM对象，然后使用，下面这句加上index索引[0]就可以转化为DOM对象，神奇啊

var file = $("#file")[0].files[0]; //正确的JQuery对象转换成DOM对象

好吧，那么下面就准备上传文件到服务器了，留意

对于php后台，需要了解的知识是关于php文件的一些操作：

1、了解php的全局数组$_FILES：http://www.w3school.com.cn/php/php_file_upload.asp

2、了解php的文件上传move_uploaded_file()函数：http://www.w3school.com.cn/php/func_filesystem_move_uploaded_file.asp

php的全局数组$_FILES

php的文件上传move_uploaded_file()函数

好了，了解得差不多了，快要上代码了，不过再等等，还要了解FormData.append()添加文件类型，上一篇jquery的$.ajax()利用FormData数据类型与php后台交互说过在同一个键（name）append()多个值（value）的话，会叠加成集合（数组）的。那好吧，那就现在是折腾一番吧，虽然实践出真知，但也过被自己坑个不少时间。呜呜呜！~

注意是我用了FormData.append()了两个文件，还有一点要注意的是，php的数组array不支持一个键有两个值，只会覆盖掉。

但是全局数组$_FILES的name、type、size等等就可以有多个值，个人感觉$_FILES是一个三维数组。

上代码，

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>
选择文件1：<input type="file" name="file" id="file"><br>
选择文件2：<input type="file" name="file" id="file2"><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 file1 = document.getElementById('file').files[0]; //获取文件路径名，注意了没有files[1]这回事，已经试过坑
          //var file1 = $("#file")[0].files[0];  //这句跟上一面那句作用一样
          
          var file2 = document.getElementById('file2').files[0]; //获取文件路径名，其实id相同也是可以的，不要用getElementById来区分就行
           
          console.log(document.getElementById('file').files[0].name);
          console.log(document.getElementById('file').files[0].size);
          console.log(document.getElementById('file').files[0].type);
          console.log(document.getElementById('file').files[0].lastModifiedDate);
      

           var formData = new FormData();

           formData.append('name',name);
           formData.append('name','123');//用于在php后台演示直接$_POST['name']只会获得最后的那个值123
           formData.append('age',age);
           formData.append('sex',sex);
           formData.append('file[]',file1);
           formData.append('file[]',file2);  //叠加成数组，传给php
          
           $.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+"，上传的文件名1："+msg.file1+"，上传的文件名2："+msg.file2);

            }
        });

      })
  })
 
</script>


</html>

server.php后台代码

<?php
	date_default_timezone_set('PRC');  //获取中国时区，'PRC':中华人民共和国

	if(!file_exists(date("Ymd",time()))) //如果文件夹不存在，则创建一个
		mkdir(date("Ymd",time()));  

	$username = $_POST['name']; //获取索引
	$age = $_POST['age'];
	$sex = $_POST['sex'];

	$filesName = $_FILES['file']['name'];  //文件名数组
	$filesTmpNamew = $_FILES['file']['tmp_name'];  //临时文件名数组

	for($i= 0;$i<count($filesName);$i++)  // count():php获取数组长度的方法
	{
		if(file_exists(date("Ymd",time()).'/'.$filesName[$i])){
			//die($filesName[$i]."文件已存在");  //如果上传的文件已经存在
		}
		else{
			move_uploaded_file($filesTmpNamew[$i], date("Ymd",time()).'/'.$filesName[$i]);  //保存在缓冲区的是临时文件名而不是文件名
		}
	}



	//$file = basename($_POST['file']);  //php的basename() 方法可获取文件名
	// if(file_exists(date("Ymd",time()).'/'.$file)){
	// 	//die("文件已存在");
	// }
	// else{
	// 	move_uploaded_file($_FILES['file']['tmp_name'], date("Ymd",time()).'/'.$file);
	// }

	$json_array = array('name'=>$username,'age'=>$age ,'sex'=>$sex,'file1'=>$filesName[0] ,'file2'=>$filesName[1]); //转换成数组类型

	$json= json_encode($json_array);  //将数组转换成json对象
	echo   $json;
	
?>

结果：

C-Jun

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
jQuery的$.ajax()与php后台交互，进行文件上传并保存在指定目录

不得不说，太孤陋寡闻了，上一篇jquery的$.ajax()利用FormData数据类型与php后台交互写到JavaScript没有特定函数获取文件名，现在要打脸了，看人家怎么说的：https://www.codexworld.com/how-to/get-file-info-name-size-type-javascript/ Before sending the file to the...
复制链接

扫一扫