Bagaimana untuk memadamkan berbilang pratonton muat naik imej dalam PHP

Dengan pembangunan Internet yang berterusan, semakin banyak laman web perlu menyokong fungsi muat naik berbilang imej Untuk tapak web, sambil melaksanakan fungsi muat naik berbilang imej, mereka juga perlu menyokong fungsi pratonton dan pemadaman, supaya sebagai. untuk memenuhi keperluan Internet dengan lebih baik. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan pelbagai fungsi muat naik, pratonton dan pemadaman imej.

1. Pelaksanaan fungsi muat naik berbilang imej

1. Kod HTML

Buat borang dalam kod HTML, tambah teg input dan atribut jenis ialah fail, teg ini membenarkan pengguna memilih imej untuk dimuat naik dan atribut enctype perlu ditambah dengan nilai "multipart/form-data", menunjukkan bahawa borang akan diserahkan menggunakan multipart/ format borang-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. Kod PHP

Kod PHP menerima fail imej yang dihantar melalui borang dan memuat naik fail ke direktori yang ditentukan pada pelayan juga diperlukan dan pengesahan.

// 设置上传目录
$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. Pelaksanaan fungsi pratonton

Pertama, anda perlu memaparkan imej yang berjaya dimuat naik pada halaman Di sini, gelung foreach digunakan untuk melintasi imej yang dimuat naik, dan tag img HTML digunakan untuk memaparkannya.

<div class="uploaded-images">
  <?php foreach ($fileNames as $fileName) { ?>
    <img src="./uploads/<?php echo $fileName ?>">
  <?php } ?>
</div>

Kod di atas akan memaparkan semua imej yang berjaya dimuat naik, tetapi kaedah ini tidak boleh melakukan beberapa operasi interaktif, seperti melayang tetikus, mengklik, dsb. Oleh itu, kami juga perlu menggunakan JavaScript untuk mencapai kesan ini Di sini kami menggunakan jQuery untuk melaksanakan fungsi yang sepadan dengan cepat.

1. Tunjukkan butang padam apabila tetikus melayang

Gunakan CSS untuk menetapkan butang padam dan paparkan butang ini apabila tetikus melayang di atas imej.

.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. Lakukan operasi pemadaman apabila anda mengklik butang padam

Selepas mengklik butang padam, imej yang sepadan perlu dipadamkan daripada pelayan dan dialih keluar daripada halaman HTML Alih keluar. Di sini kami menggunakan ajax untuk melaksanakan operasi pemadaman tak segerak.

<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. Pelaksanaan fungsi padam

Apabila butang padam diklik, permintaan tak segerak dicetuskan untuk memadamkan imej yang sepadan daripada pelayan. Kami boleh melakukan beberapa gesaan checksum sebelum pemadaman dan memberikan maklumat segera yang sepadan apabila ralat berlaku.

1. Padam Pengesahan

Sebelum memadam, kita perlu mengesahkan sama ada imej itu wujud Jika ia tidak wujud, operasi pemadaman tidak boleh dilakukan.

$file = $dir . $_POST['fileName'];
if (file_exists($file)) {
  // 删除文件
  unlink($file);
  echo 'success';
} else {
  echo '文件不存在';
}

2. Padam gesaan

Kami boleh menggunakan ajax untuk mengembalikan kod status ke bahagian hadapan selepas pemadaman gagal atau berjaya dan memaparkan maklumat gesaan yang sepadan. Berikut ialah kotak gesaan yang ringkas dan mudah digunakan yang menggunakan komponen tetingkap timbul dalam 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');
    }
  }
});

Pada ketika ini, kami telah berjaya melaksanakan fungsi muat naik, pratonton dan pemadaman berbilang imej, dan juga menjalankan pengesahan dan gesaan yang sepadan. Di atas hanyalah pengenalan ringkas kepada pelaksanaan Jika anda perlu menggunakan fungsi ini, anda boleh membuat pengubahsuaian dan sambungan yang sepadan mengikut keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk memadamkan berbilang pratonton muat naik imej dalam PHP. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!