Ajax上傳PHP的簡(jiǎn)單實(shí)現(xiàn)方法
在我們的網(wǎng)站中，用戶上傳圖片和文件已經(jīng)成為常態(tài)。然而，傳統(tǒng)的上傳方式體驗(yàn)較差，用戶體驗(yàn)也不好。這時(shí)我們可以通過(guò)使用Ajax上傳PHP的方式來(lái)改善用戶體驗(yàn)。本文介紹如何通過(guò)Ajax上傳文件。
一、前端HTML代碼
在前端，我們需要制作一個(gè)表單來(lái)獲取用戶需要上傳的文件，請(qǐng)參考下面的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);
//創(chuàng)建ajax對(duì)象
var xhr = new XMLHttpRequest();
//監(jiān)聽(tīng)ajax狀態(tài)
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && xhr.status == 200){
console.log(xhr.responseText);
}
}
//發(fā)送ajax請(qǐng)求（這里的url為處理上傳文件的php文件）
xhr.open("POST","upload.php");
xhr.send(formData);
})//得到上傳文件的信息
$fileInfo = $_FILES['file'];
//得到上傳文件的名稱
$fileName = $fileInfo['name'];
//得到上傳文件的類型
$fileType = $fileInfo['type'];
//得到上傳文件所在的臨時(shí)文件路徑
$filePath = $fileInfo['tmp_name'];
//得到上傳文件的大小
$fileSize = $fileInfo['size'];
//設(shè)定文件上傳的路徑及名稱規(guī)則
$uploadPath = $_SERVER['DOCUMENT_ROOT'] . '/uploads/';
if (!file_exists($uploadPath)) {
mkdir($uploadPath, 0777, true);
}
$newName = time() . mt_rand(1000, 9999) . strrchr($fileName, '.');
//將臨時(shí)文件轉(zhuǎn)移到指定目錄下
if (move_uploaded_file($filePath, $uploadPath . $newName)) {
echo $newName .'上傳成功';
} else {
echo '上傳失敗';
}