Comment supprimer plusieurs aperçus de téléchargement d'images en PHP

Avec le développement continu d'Internet, de plus en plus de sites Web doivent prendre en charge la fonction de téléchargement multi-images. Pour les sites Web, tout en implémentant la fonction de téléchargement multi-images, ils doivent également prendre en charge les fonctions de prévisualisation et de suppression, afin de mieux fonctionner. répondre aux besoins des utilisateurs. Cet article explique comment utiliser PHP pour implémenter plusieurs fonctions de téléchargement, d'aperçu et de suppression d'images.

1. Implémentation de la fonction de téléchargement multi-images

1. Code HTML

Créez un formulaire dans le code HTML, ajoutez une balise d'entrée, l'attribut type est file, cette balise permet à l'utilisateur de sélectionner l'image à afficher. téléchargé, et doit également ajouter un attribut enctype avec une valeur de "multipart/form-data", indiquant que le formulaire sera soumis en utilisant le format 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. Code PHP

Le code PHP accepte les fichiers image soumis par le formulaire et télécharge les fichiers dans le répertoire spécifié sur le serveur. Le traitement et la vérification des données sont également requis.

// 设置上传目录
$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. Implémentation de la fonction d'aperçu

Tout d'abord, vous devez afficher les images téléchargées avec succès sur la page. Ici, une boucle foreach est utilisée pour parcourir les images téléchargées et la balise HTML img est utilisée pour les afficher.

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

Le code ci-dessus affichera toutes les images téléchargées avec succès, mais cette méthode ne peut pas effectuer certaines opérations interactives, telles que le survol de la souris, le clic, etc. Par conséquent, nous devons également utiliser JavaScript pour obtenir ces effets. Ici, nous utilisons jQuery pour implémenter rapidement les fonctions correspondantes.

1. Afficher le bouton Supprimer lorsque la souris survole

Utilisez CSS pour définir un bouton Supprimer et afficher ce bouton lorsque la souris survole l'image.

.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. Effectuez l'opération de suppression lorsque vous cliquez sur le bouton Supprimer

Après avoir cliqué sur le bouton Supprimer, l'image correspondante doit être supprimée du serveur et supprimée de la page HTML. Ici, nous utilisons ajax pour implémenter des opérations de suppression asynchrone.

<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. Implémentation de la fonction de suppression

Lorsque le bouton de suppression est cliqué, une requête asynchrone est déclenchée pour supprimer l'image correspondante du serveur. Nous pouvons effectuer des invites de somme de contrôle avant la suppression et fournir les informations d'invite correspondantes lorsqu'une erreur se produit.

1. Vérification de suppression

Avant de supprimer, nous devons vérifier si l'image existe. Si elle n'existe pas, l'opération de suppression ne peut pas être effectuée.

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

2. Supprimer l'invite

Nous pouvons utiliser ajax pour renvoyer le code d'état au front-end après l'échec ou la réussite de la suppression, et afficher les informations d'invite correspondantes. Voici une boîte de dialogue simple et facile à utiliser qui utilise le composant de fenêtre contextuelle de 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');
    }
  }
});

Jusqu'à présent, nous avons implémenté avec succès les fonctions de téléchargement, de prévisualisation et de suppression de plusieurs images, et en même temps effectué la vérification et les invites correspondantes. Ce qui précède n'est qu'une brève introduction à l'implémentation. Si vous avez besoin d'utiliser ces fonctions, vous pouvez apporter les modifications et extensions correspondantes en fonction de vos besoins.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!