在前端使用AJAX上传文件时,需要确保在FormData对象中正确包含文件数据,同时使用POST方法将其发送到服务器。在服务器端,需要进行正确的文件处理操作,包括验证和存储。以下是一个示例代码:
前端代码:
var fileInput = document.getElementById('fileInput');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('file', file);
var xhr = new XMLHttpRequest();
xhr.open('POST', 'upload.php', true);
xhr.onload = function () {
if (xhr.status === 200) {
console.log('File uploaded successfully.');
} else {
console.log('Error uploading file.');
}
};
xhr.send(formData);
服务端代码:
if (isset($_FILES['file'])) {
$file = $_FILES['file'];
$fileName = $file['name'];
$tempName = $file['tmp_name'];
$fileSize = $file['size'];
$fileError = $file['error'];
$fileType = $file['type'];
if ($fileError === UPLOAD_ERR_OK) {
$uploadPath = 'uploads/' . $fileName;
move_uploaded_file($tempName, $uploadPath);
echo 'File uploaded successfully.';
} else {
echo 'Error uploading file.';
}
} else {
echo 'No file uploaded.';
}
其中,$_FILES
变量包含了上传文件的信息,包括文件名、临时文件名、文件大小、文件类型和错误代码等。我们需要用move_uploaded_file
函数将其从临时位置移动到指定的目录中,同时根据错误代码判断是否上传成功。