Ajax上傳PHP的簡單實現方法
在我們的網站中，用戶上傳圖片和文件已經成為常態。然而，傳統的上傳方式體驗較差，用戶體驗也不好。這時我們可以通過使用Ajax上傳PHP的方式來改善用戶體驗。本文介紹如何通過Ajax上傳文件。
一、前端HTML代碼
在前端，我們需要制作一個表單來獲取用戶需要上傳的文件，請參考下面的HTML代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax上傳 PHP</title>
<style>
.upload{
width:200px;
height:200px;
margin:100px auto;
border:1px solid gray;
display:flex;
justify-content:center;
align-items:center;
font-size:18px;
color:gray;
}
input[type="file"]{
display:none;
}
</style>
</head>
<body>
<div class="upload">
選擇文件...
<input type="file" name="file" id="file">
</div>
</body>
</html>var uploadDiv = document.querySelector(".upload");
var uploadInput = document.querySelector("#file");
uploadDiv.addEventListener("click",function(){
uploadInput.click();
})
uploadInput.addEventListener("change",function(){
//獲取要上傳的文件
var file = this.files[0];
var formData = new FormData();
formData.append("file",file);
//創建ajax對象
var xhr = new XMLHttpRequest();
//監聽ajax狀態
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
//發送ajax請求（這里的url為處理上傳文件的php文件）
xhr.open("POST","upload.php");
xhr.send(formData);
})//得到上傳文件的信息
$fileInfo = $_FILES['file'];
//得到上傳文件的名稱
$fileName = $fileInfo['name'];
//得到上傳文件的類型
$fileType = $fileInfo['type'];
//得到上傳文件所在的臨時文件路徑
$filePath = $fileInfo['tmp_name'];
//得到上傳文件的大小
$fileSize = $fileInfo['size'];
//設定文件上傳的路徑及名稱規則
$uploadPath = $_SERVER['DOCUMENT_ROOT'] . '/uploads/';
if (!file_exists($uploadPath)) {
mkdir($uploadPath, 0777, true);
}
$newName = time() . mt_rand(1000, 9999) . strrchr($fileName, '.');
//將臨時文件轉移到指定目錄下
if (move_uploaded_file($filePath, $uploadPath . $newName)) {
echo $newName .'上傳成功';
} else {
echo '上傳失敗';
}