PHPで複数の画像アップロードプレビューを削除する方法
インターネットの継続的な発展に伴い、複数画像のアップロード機能をサポートする必要がある Web サイトが増えています。Web サイトでは、複数画像のアップロード機能を実装すると同時に、プレビュー機能や削除機能もサポートする必要があります。インターネットのニーズ、ユーザーのニーズをより適切に満たします。この記事では、PHP を使用して複数の画像のアップロード、プレビュー、削除機能を実装する方法を紹介します。
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>
- 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 を使用して対応する機能を迅速に実装します。
- マウスを上に置いたときに削除ボタンを表示する
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; }
- 削除ボタンをクリックしたときに削除操作を実行します
削除ボタンをクリックした後、対応する画像をサーバーから削除し、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. 削除関数の実装
削除ボタンをクリックすると、非同期リクエストがトリガーされ、対応する画像がサーバーから削除されます。削除前にいくつかのチェックサム プロンプトを実行し、エラーが発生したときに対応するプロンプト情報を提供できます。
- 削除確認
削除する前に画像が存在するかどうかを確認する必要があり、存在しない場合は削除操作を実行できません。
$file = $dir . $_POST['fileName']; if (file_exists($file)) { // 删除文件 unlink($file); echo 'success'; } else { echo '文件不存在'; }
- プロンプトの削除
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">×</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 サイトの他の関連記事を参照してください。

ホットAIツール

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

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

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

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

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

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

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

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

ホットトピック









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

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

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

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

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

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

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

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