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

客户需要上传一个的产品，

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

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

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<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>

$(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"); //判断是否已经提交Top Quality VAS 5054A Bluetooth ODIS V4.4.1 VW Audi Bentley Lamborghini Diagnostic Tool with OKI Chip Multi-languages图片

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 "删除不成功！";

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

猜你喜欢