PHPで複数の画像アップロードプレビューを削除する方法

インターネットの継続的な発展に伴い、複数画像のアップロード機能をサポートする必要がある Web サイトが増えています。Web サイトでは、複数画像のアップロード機能を実装すると同時に、プレビュー機能や削除機能もサポートする必要があります。インターネットのニーズ、ユーザーのニーズをより適切に満たします。この記事では、PHP を使用して複数の画像のアップロード、プレビュー、削除機能を実装する方法を紹介します。

1. 複数画像アップロード機能の実装

1. HTMLコード

HTMLコードでフォームを作成し、inputタグを追加して、 type 属性は file です。このタグを使用すると、ユーザーはアップロードする画像を選択できます。enctype 属性には値「multipart/form-data」を追加する必要があります。これは、フォームが multipart/ を使用して送信されることを示します。フォームデータ形式。

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

2. プレビュー機能の実装

まず、アップロードされた画像をページに表示する必要がありますが、ここでは 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();
    }
  });
});

3. 削除関数の実装

削除ボタンをクリックすると、非同期リクエストがトリガーされ、対応する画像がサーバーから削除されます。削除前にいくつかのチェックサム プロンプトを実行し、エラーが発生したときに対応するプロンプト情報を提供できます。

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 中国語 Web サイトの他の関連記事を参照してください。