jQuery的$.ajax()与php后台交互，进行图片上传并删除_删除通过ajax上传的图片 js-优快云博客

本文链接：https://blog.youkuaiyun.com/ccccc_Jun/article/details/79145737

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

那么这篇讲上传在服务器的文件后，将其删除，主要是以上传和删除图片为例子，因为比较明显

先看结果吧，上一篇基本讲完了上传的技巧，删除技巧并不难

看完结果看代码，代码好理解：

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" accept="image/gif,image/png,image/jpg,image/jpeg"><br>

<button id="send">提交</button> <button id="reset">删除图片</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];  //这句跟上一面那句作用一样
          
          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('age',age);
           formData.append('sex',sex);
           formData.append('file',file1);
          
          
           $.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){  //请求成功后的回调函数
              //alert(msg);
               $("#result").append("<div> 你的名字是"+msg.name+"，性别："+msg.sex+"，年龄："+msg.age+"</div>");
               $('#result').append("<img src = "+msg.file+">");

            }
        });

      });

      $("#reset").click(function () { //删除图片事件

          var flag = $("#result").children().is("img");  //判断是否已经提交图片
          
          if (flag) { //如果提交了，就进行jQuery的ajax()发送图片路径进行删除

                var href = location.href; //当前路径
                console.log(href);

                href = href.substring(0,href.lastIndexOf("/")+1);
                console.log(href);

                var imgSrc = $("#result").children("img")[0].src;
                imgSrc = imgSrc.replace(href,''); //一种分离相对路径很笨的办法

                 $.ajax({
                 type: "POST",
                 url: "delete.php",  //同目录下的php文件
               
                data:{imgSrc,imgSrc},
             
                 success: function(msg){  //请求成功后的回调函数
                    alert(msg);
                    $("#result").children("img").remove();  //删除DOM节点
            }
        });
          }
          
      });

  })
 
</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'];  //文件名数组
	$filesTmpName = $_FILES['file']['tmp_name'];  //临时文件名数组
	$filePath = date("Ymd",time()).'/'.$filesName; //文件路径

	// 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]);  //保存在缓冲区的是临时文件名而不是文件名
	// 		$filePath[$i] = date("Ymd",time()).'/'.$filesName[$i];
	// 	}
	// }


	//$file = basename($_POST['file']);  //php的basename() 方法可获取文件名
	if(!file_exists(date("Ymd",time()).'/'.$filesName)){
		move_uploaded_file($filesTmpName, $filePath);
	}
	
	$json_array = array('name'=>$username,'age'=>$age ,'sex'=>$sex,'file'=>$filePath); //转换成数组类型

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

删除图片的delete.php

<?php
   $imgSrc =$_POST['imgSrc'];
    if(file_exists($imgSrc)) //
    	if(unlink($imgSrc))
		  echo "图片删除成功！";  //php删除文件函数unlink();
		else
			echo "删除不成功！";

?>