PHP에서 여러 이미지 업로드 미리보기를 삭제하는 방법

인터넷이 지속적으로 발전함에 따라 더 많은 웹사이트가 다중 이미지 업로드 기능을 지원해야 합니다. 웹사이트에서는 다중 이미지 업로드 기능을 구현하는 동시에 미리보기 및 삭제 기능도 지원해야 합니다. 사용자의 요구. 이 기사에서는 PHP를 사용하여 여러 이미지 업로드, 미리보기 및 삭제 기능을 구현하는 방법을 소개합니다.

1. 다중 이미지 업로드 기능 구현

1. HTML 코드

HTML 코드에서 양식을 생성하고 입력 태그를 추가합니다. 유형 속성은 파일입니다. 이 태그를 사용하면 사용자가 업로드할 이미지를 선택할 수 있습니다. 또한 "multipart/form-data" 값을 가진 enctype 속성을 추가해야 합니다. 이는 양식이 multipart/form-data 형식을 사용하여 제출됨을 나타냅니다.

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 태그를 사용합니다.

위 코드는 성공적으로 업로드된 모든 이미지를 표시하지만 이 방법은 마우스 가리키기, 클릭 등과 같은 일부 대화형 작업을 수행할 수 없습니다. 따라서 이러한 효과를 얻으려면 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를 사용하여 비동기 삭제 작업을 구현합니다.

  
x
 

// 点击删除按钮时触发 $('.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의 팝업 창 구성 요소를 사용하는 간단하고 사용하기 쉬운 프롬프트 상자입니다.

 
 删除失败！文件不存在.  ×  

$.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 중국어 웹사이트의 기타 관련 기사를 참조하세요!