隨著網路的不斷發展，越來越多的網站需要支援多圖上傳功能，而對於網站來說，實現多圖上傳功能的同時還需要支援預覽和刪除功能，這樣才能更好地滿足用戶的需求。本文將介紹如何使用PHP實作多圖上傳、預覽和刪除功能。
一、多圖上傳功能的實作
在HTML程式碼中建立一個表單，新增一個input標籤，type屬性為file，這個標籤可以讓使用者選擇需要上傳的圖片，同時需要新增一個enctype屬性，值為“multipart/form-data”，表示表單將會使用multipart/form-data格式進行提交。
<form action="upload.php" method="post" enctype="multipart/form-data"> <input type="file" name="image[]" multiple> <input type="submit" name="submit" value="上传"> </form>
PHP程式碼接受表單提交的圖片文件，並將文件上傳到伺服器上的指定目錄中，同時還需要進行資料處理和驗證。
// 设置上传目录
$dir = './uploads/';
// 处理上传图片
if (isset($_FILES['image'])) {
$image = $_FILES['image'];
// 遍历上传的图片
foreach ($image['name'] as $key => $name) {
// 获取图片扩展名
$ext = pathinfo($name, PATHINFO_EXTENSION);
// 生成新文件名，避免文件名重复
$newFileName = uniqid() . '.' . $ext;
// 将上传的图片移到目标目录
move_uploaded_file($image['tmp_name'][$key], $dir . $newFileName);
// 将上传成功的文件名保存到数组中
$fileNames[] = $newFileName;
}
}二、預覽功能的實作
首先需要在頁面中顯示上傳成功的圖片，這裡使用foreach循環遍歷已經上傳的圖片，並使用HTML img標籤將其展示出來。
<div class="uploaded-images">
<?php foreach ($fileNames as $fileName) { ?>
<img src="./uploads/<?php echo $fileName ?>">
<?php } ?>
</div>上面的程式碼會將上傳成功的所有圖片都展示出來，但是這種方式無法進行一些互動操作，例如滑鼠懸停、點擊等。因此，我們也需要使用JavaScript來實現這些效果，這裡我們使用jQuery來快速實現對應功能。
使用CSS來設定一個刪除按鈕，當滑鼠停留在圖片上時，顯示這個按鈕。
.delete-btn {
position: absolute;
top: 5px;
right: 5px;
width: 20px;
height: 20px;
cursor: pointer;
background-color: #fff;
border-radius: 50%;
opacity: 0.7;
visibility: hidden;
transition: opacity ease-in-out 0.2s;
}
.image-container:hover .delete-btn {
visibility: visible;
}點擊刪除按鈕後，需要將對應的圖片從伺服器上刪除，並將其從HTML頁面中移除。這裡我們使用ajax來實現非同步刪除操作。
<div class="image-container"> <img class="image" src="./uploads/<?php echo $fileName ?>"> <div class="delete-btn" data-filename="<?php echo $fileName ?>">x</div> </div>
// 点击删除按钮时触发
$('.delete-btn').on('click', function() {
var $container = $(this).closest('.image-container');
var fileName = $(this).data('filename');
// 发送异步请求删除服务器上的图片
$.ajax({
url: '/delete.php',
type: 'POST',
data: {fileName: fileName},
success: function(response) {
// 移除页面中的图片
$container.remove();
}
});
});三、刪除功能的實作
在點擊刪除按鈕時，觸發非同步請求將對應的圖片從伺服器上刪除。我們可以在刪除前進行一些校驗和提示，在發生錯誤時給予相應的提示訊息。
在刪除之前，我們需要校驗圖片是否存在，如果不存在則無法進行刪除動作。
$file = $dir . $_POST['fileName'];
if (file_exists($file)) {
// 删除文件
unlink($file);
echo 'success';
} else {
echo '文件不存在';
}我們可以透過ajax在刪除失敗或成功後，把狀態碼回傳給前端，並顯示對應的提示訊息。這裡提供一個簡單易用的提示框，使用了Bootstrap中的彈出視窗元件。
<!-- 弹出窗口模板 --> <div class="alert alert-danger alert-dismissible fade show" role="alert"> <strong>删除失败！</strong>文件不存在. <button type="button" class="close" data-dismiss="alert" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div>
$.ajax({
url: '/delete.php',
type: 'POST'
data: {fileName: fileName},
success: function(response) {
if (response === 'success') {
// 显示删除成功提示
$('.delete-success').removeClass('hidden');
} else {
// 显示删除失败提示
$('.delete-failed').removeClass('hidden');
}
}
});至此，我們已經成功地實現了多圖上傳、預覽和刪除功能，並同時進行了相應的校驗和提示。以上只是實現方式的簡單介紹，如果你需要使用這些功能，可以根據你的需求來進行相應的修改和擴展。
以上是php怎麼實現多圖上傳預覽刪除的詳細內容。更多資訊請關注PHP中文網其他相關文章！
