內容面板收納
客戶需要上傳一個的產品，
要實現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"); //判斷是否已經提交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 "刪除不成功！";
?>
