在Web開發(fā)中，上傳圖片并預(yù)覽是一個(gè)常見的需求。使用PHP和AJAX可以輕松實(shí)現(xiàn)這個(gè)功能，實(shí)現(xiàn)圖片的即時(shí)預(yù)覽和返回路徑。具體實(shí)現(xiàn)步驟如下：

首先，我們需要一個(gè)包含文件上傳表單和圖片預(yù)覽功能的HTML頁面。在頁面中，我們可以添加一個(gè)文件選擇框和一個(gè)預(yù)覽框，用于顯示用戶選擇的圖片。代碼如下：

<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="image" id="image" onchange="previewImage()">
<img src="" alt="Preview Image" id="preview">
<input type="submit" value="Upload">
</form>

接下來，我們編寫一個(gè)PHP文件（upload.php）來處理文件上傳和返回圖片路徑的功能。PHP代碼如下：

<?php
$target_dir = "uploads/"; // 設(shè)置上傳目錄
$target_file = $target_dir . basename($_FILES["image"]["name"]); // 獲取上傳文件的路徑
$uploadOk = 1;
// 檢查文件是否為圖片格式
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["image"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
// 檢查文件是否已存在
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// 檢查文件大小
if ($_FILES["image"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// 允許特定的文件格式
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
// 檢查上傳是否成功
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// 如果所有條件都通過，則將文件從臨時(shí)位置移動到目標(biāo)位置，并返回文件路徑
} else {
if (move_uploaded_file($_FILES["image"]["tmp_name"], $target_file)) {
echo "The file ". basename( $_FILES["image"]["name"]). " has been uploaded.";
echo "File Path: " . $target_file;
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>

上述代碼首先對上傳的文件進(jìn)行各種驗(yàn)證和檢查，包括文件類型、文件大小、文件是否已存在等。如果文件通過了所有的檢查條件，則將文件從臨時(shí)位置移動到目標(biāo)位置，并返回文件路徑。

最后，我們需要編寫一個(gè)JavaScript函數(shù)來實(shí)現(xiàn)圖片的即時(shí)預(yù)覽。代碼如下：

function previewImage() {
var reader = new FileReader();
reader.onload = function (e) {
document.getElementById("preview").src = e.target.result;
};
reader.readAsDataURL(document.getElementById("image").files[0]);
}

上述代碼中，我們創(chuàng)建了一個(gè)FileReader對象，通過讀取用戶選擇的圖片文件并轉(zhuǎn)換成可顯示的URL。將轉(zhuǎn)換后的URL賦值給預(yù)覽框的src屬性，即可實(shí)現(xiàn)圖片的即時(shí)預(yù)覽。

綜上所述，通過PHP和AJAX實(shí)現(xiàn)圖片上傳和預(yù)覽功能并返回圖片路徑非常簡單。我們只需要在HTML頁面中添加文件上傳表單和預(yù)覽框，并在PHP文件中對文件進(jìn)行驗(yàn)證和移動操作，同時(shí)在JavaScript中實(shí)現(xiàn)圖片的即時(shí)預(yù)覽即可。這樣，用戶在選擇圖片后，不僅可以即時(shí)預(yù)覽圖片，還可以獲取到上傳圖片的路徑，方便后續(xù)處理。

參考文獻(xiàn)：

1. PHP File Upload: https://www.php.net/manual/en/features.file-upload.php
2. FileReader: https://developer.mozilla.org/en-US/docs/Web/API/FileReader