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 '上传失败';
}