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

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

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

1. HTML 코드

HTML 코드에서 양식을 생성하고 입력 태그를 추가합니다. 유형 속성은 파일입니다. 이 태그를 사용하면 사용자가 업로드할 이미지를 선택할 수 있습니다. 또한 "multipart/form-data" 값을 가진 enctype 속성을 추가해야 합니다. 이는 양식이 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. 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!