jQuery的$.ajax()与php后台交互,进行图片上传并删除

上一篇讲到: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 "删除不成功!";

?>

 

 

 

 

 

 

 

 

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值