So löschen Sie mehrere Bild-Upload-Vorschauen in PHP

Mit der kontinuierlichen Entwicklung des Internets müssen immer mehr Websites die Funktion zum Hochladen mehrerer Bilder unterstützen. Bei der Implementierung der Funktion zum Hochladen mehrerer Bilder müssen Websites auch Vorschau- und Löschfunktionen unterstützen, um den Anforderungen besser gerecht zu werden die Bedürfnisse der Benutzer. In diesem Artikel wird erläutert, wie Sie mit PHP mehrere Funktionen zum Hochladen, Vorsehen und Löschen von Bildern implementieren.

1. Implementierung der Funktion zum Hochladen mehrerer Bilder

1. HTML-Code

Erstellen Sie ein Formular im HTML-Code, fügen Sie ein Eingabe-Tag hinzu, das Typattribut ist Datei, dieses Tag ermöglicht es dem Benutzer, das zu erstellende Bild auszuwählen hochgeladen und muss gleichzeitig hinzugefügt werden. Ein enctype-Attribut mit dem Wert „multipart/form-data“, das angibt, dass das Formular im Multipart/form-data-Format übermittelt wird.

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

Der PHP-Code akzeptiert über das Formular übermittelte Bilddateien und lädt die Dateien in das angegebene Verzeichnis auf dem Server hoch.

// 设置上传目录
$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;
  }
}

2. Implementierung der Vorschaufunktion

Zuerst müssen Sie die erfolgreich hochgeladenen Bilder auf der Seite anzeigen. Hier wird eine foreach-Schleife verwendet, um die hochgeladenen Bilder zu durchlaufen, und das HTML-img-Tag wird verwendet, um sie anzuzeigen.

<div class="uploaded-images">
  <?php foreach ($fileNames as $fileName) { ?>
    <img src="./uploads/<?php echo $fileName ?>">
  <?php } ?>
</div>

Der obige Code zeigt alle erfolgreich hochgeladenen Bilder an, aber diese Methode kann einige interaktive Vorgänge, wie z. B. Bewegen der Maus, Klicken usw., nicht ausführen. Daher müssen wir auch JavaScript verwenden, um diese Effekte zu erzielen. Hier verwenden wir jQuery, um die entsprechenden Funktionen schnell zu implementieren.

1. Zeigen Sie die Schaltfläche „Löschen“ an, wenn die Maus über dem Bild schwebt.

Verwenden Sie CSS, um eine Schaltfläche zum Löschen festzulegen und diese Schaltfläche anzuzeigen, wenn die Maus über dem Bild schwebt.

.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. Führen Sie den Löschvorgang aus, wenn Sie auf die Schaltfläche „Löschen“ klicken.

Nach dem Klicken auf die Schaltfläche „Löschen“ muss das entsprechende Bild vom Server gelöscht und von der HTML-Seite entfernt werden. Hier verwenden wir Ajax, um asynchrone Löschvorgänge zu implementieren.

<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();
    }
  });
});

3. Implementierung der Löschfunktion

Wenn auf die Schaltfläche „Löschen“ geklickt wird, wird eine asynchrone Anfrage ausgelöst, um das entsprechende Bild vom Server zu löschen. Wir können vor dem Löschen einige Prüfsummenabfragen durchführen und entsprechende Promptinformationen ausgeben, wenn ein Fehler auftritt.

1. Löschüberprüfung

Vor dem Löschen müssen wir überprüfen, ob das Bild vorhanden ist. Wenn es nicht vorhanden ist, kann der Löschvorgang nicht durchgeführt werden.

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

2. Eingabeaufforderung löschen

Wir können Ajax verwenden, um den Statuscode an das Frontend zurückzugeben, nachdem der Löschvorgang fehlgeschlagen oder erfolgreich war, und die entsprechenden Eingabeaufforderungsinformationen anzuzeigen. Hier ist ein einfaches und benutzerfreundliches Eingabeaufforderungsfeld, das die Popup-Fensterkomponente in Bootstrap verwendet.

<!-- 弹出窗口模板 -->
<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');
    }
  }
});

Bisher haben wir die Funktionen zum Hochladen, Vorschau und Löschen mehrerer Bilder erfolgreich implementiert und gleichzeitig entsprechende Überprüfungen und Eingabeaufforderungen durchgeführt. Das Obige ist nur eine kurze Einführung in die Implementierung. Wenn Sie diese Funktionen verwenden müssen, können Sie entsprechend Ihren Anforderungen entsprechende Änderungen und Erweiterungen vornehmen.

Das obige ist der detaillierte Inhalt vonSo löschen Sie mehrere Bild-Upload-Vorschauen in PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!