ホームページ バックエンド開発 PHPの問題 PHPで複数の画像アップロードプレビューを削除する方法

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

Apr 21, 2023 am 09:08 AM

インターネットの継続的な発展に伴い、複数画像のアップロード機能をサポートする必要がある 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>
ログイン後にコピー
  1. 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;
}
ログイン後にコピー
  1. 削除ボタンをクリックしたときに削除操作を実行します

削除ボタンをクリックした後、対応する画像をサーバーから削除し、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 '文件不存在';
}
ログイン後にコピー
  1. プロンプトの削除

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

PHP 8 JIT(Just-in-Time)コンピレーション:パフォーマンスの向上方法。 PHP 8 JIT(Just-in-Time)コンピレーション:パフォーマンスの向上方法。 Mar 25, 2025 am 10:37 AM

PHP 8のJITコンピレーションは、頻繁に実行されるコードをマシンコードにコンパイルし、重い計算でアプリケーションに利益をもたらし、実行時間を短縮することにより、パフォーマンスを向上させます。

OWASPトップ10 PHP:共通の脆弱性を説明し、軽減します。 OWASPトップ10 PHP:共通の脆弱性を説明し、軽減します。 Mar 26, 2025 pm 04:13 PM

この記事では、PHPおよび緩和戦略におけるOWASPトップ10の脆弱性について説明します。重要な問題には、PHPアプリケーションを監視および保護するための推奨ツールを備えたインジェクション、認証の壊れ、XSSが含まれます。

PHPセキュアファイルアップロード:ファイル関連の脆弱性の防止。 PHPセキュアファイルアップロード:ファイル関連の脆弱性の防止。 Mar 26, 2025 pm 04:18 PM

この記事では、コードインジェクションのような脆弱性を防ぐために、PHPファイルのアップロードを確保することについて説明します。ファイルタイプの検証、セキュアストレージ、およびアプリケーションセキュリティを強化するエラー処理に焦点を当てています。

PHP認証&amp;承認:安全な実装。 PHP認証&amp;承認:安全な実装。 Mar 25, 2025 pm 03:06 PM

この記事では、不正アクセスを防ぎ、ベストプラクティスの詳細、セキュリティ強化ツールの推奨を防ぐために、PHPで堅牢な認証と承認の実装について説明します。

PHP暗号化:対称と非対称暗号化。 PHP暗号化:対称と非対称暗号化。 Mar 25, 2025 pm 03:12 PM

この記事では、PHPの対称的および非対称暗号化について説明し、適合性、パフォーマンス、セキュリティの違いを比較しています。対称暗号化はより速く、バルクデータに適していますが、非対称は安全なキー交換に使用されます。

PHPを使用してデータベースからデータを取得するにはどうすればよいですか? PHPを使用してデータベースからデータを取得するにはどうすればよいですか? Mar 20, 2025 pm 04:57 PM

記事では、PHPを使用してデータベースからデータを取得し、手順、セキュリティ対策、最適化手法、およびソリューションを使用した一般的なエラーをカバーしています。

PHP CSRF保護:CSRF攻撃を防ぐ方法。 PHP CSRF保護:CSRF攻撃を防ぐ方法。 Mar 25, 2025 pm 03:05 PM

この記事では、CSRFトークン、同じサイトCookie、適切なセッション管理など、PHPでのCSRF攻撃を防ぐための戦略について説明します。

mysqli_query()とmysqli_fetch_assoc()の目的は何ですか? mysqli_query()とmysqli_fetch_assoc()の目的は何ですか? Mar 20, 2025 pm 04:55 PM

この記事では、mysqlデータベースインタラクションのphpでmysqli_query()およびmysqli_fetch_assoc()関数について説明します。それは彼らの役割、違いを説明し、それらの使用の実用的な例を提供します。主な議論は、USINの利点に焦点を当てています

See all articles