php怎麼實現多圖上傳預覽刪除

隨著網路的不斷發展，越來越多的網站需要支援多圖上傳功能，而對於網站來說，實現多圖上傳功能的同時還需要支援預覽和刪除功能，這樣才能更好地滿足用戶的需求。本文將介紹如何使用PHP實作多圖上傳、預覽和刪除功能。

一、多圖上傳功能的實作

1. HTML程式碼

在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>

2. PHP程式碼

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來快速實現對應功能。

1. 滑鼠懸停時顯示刪除按鈕

使用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;
}

2. 點擊刪除按鈕時執行刪除動作

點擊刪除按鈕後，需要將對應的圖片從伺服器上刪除，並將其從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();
    }
  });
});

三、刪除功能的實作

在點擊刪除按鈕時，觸發非同步請求將對應的圖片從伺服器上刪除。我們可以在刪除前進行一些校驗和提示，在發生錯誤時給予相應的提示訊息。

1. 刪除校驗

在刪除之前，我們需要校驗圖片是否存在，如果不存在則無法進行刪除動作。

$file = $dir . $_POST['fileName'];
if (file_exists($file)) {
  // 删除文件
  unlink($file);
  echo 'success';
} else {
  echo '文件不存在';
}

2. 刪除提示

我們可以透過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">&times;</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中文網其他相關文章！