Rumah pembangunan bahagian belakang masalah PHP Bagaimana untuk memadamkan berbilang pratonton muat naik imej dalam PHP

Bagaimana untuk memadamkan berbilang pratonton muat naik imej dalam PHP

Apr 21, 2023 am 09:08 AM

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>
Salin selepas log masuk
  1. 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;
  }
}
Salin selepas log masuk

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>
Salin selepas log masuk

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;
}
Salin selepas log masuk
  1. 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>
Salin selepas log masuk
// 点击删除按钮时触发
$('.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();
    }
  });
});
Salin selepas log masuk

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 '文件不存在';
}
Salin selepas log masuk
  1. 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>
Salin selepas log masuk
$.ajax({
  url: '/delete.php',
  type: 'POST'
  data: {fileName: fileName},
  success: function(response) {
    if (response === 'success') {
      // 显示删除成功提示
      $('.delete-success').removeClass('hidden');
    } else {
      // 显示删除失败提示
      $('.delete-failed').removeClass('hidden');
    }
  }
});
Salin selepas log masuk

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!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

PHP 8 JIT (Just-in-Time) Penyusunan: Bagaimana ia meningkatkan prestasi. PHP 8 JIT (Just-in-Time) Penyusunan: Bagaimana ia meningkatkan prestasi. Mar 25, 2025 am 10:37 AM

Kompilasi JIT Php 8 meningkatkan prestasi dengan menyusun kod yang sering dilaksanakan ke dalam kod mesin, memberi manfaat kepada aplikasi dengan pengiraan berat dan mengurangkan masa pelaksanaan.

OWASP Top 10 PHP: Huraikan dan mengurangkan kelemahan umum. OWASP Top 10 PHP: Huraikan dan mengurangkan kelemahan umum. Mar 26, 2025 pm 04:13 PM

Artikel ini membincangkan kelemahan OWASP 10 dalam strategi PHP dan mitigasi. Isu -isu utama termasuk suntikan, pengesahan yang rosak, dan XSS, dengan alat yang disyorkan untuk memantau dan mendapatkan aplikasi PHP.

PHP Secure File Muat naik: Mencegah kelemahan berkaitan fail. PHP Secure File Muat naik: Mencegah kelemahan berkaitan fail. Mar 26, 2025 pm 04:18 PM

Artikel ini membincangkan mendapatkan muat naik fail PHP untuk mengelakkan kelemahan seperti suntikan kod. Ia memberi tumpuan kepada pengesahan jenis fail, penyimpanan selamat, dan pengendalian ralat untuk meningkatkan keselamatan aplikasi.

Pengesahan PHP & amp; Kebenaran: Pelaksanaan selamat. Pengesahan PHP & amp; Kebenaran: Pelaksanaan selamat. Mar 25, 2025 pm 03:06 PM

Artikel ini membincangkan pelaksanaan pengesahan dan kebenaran yang mantap dalam PHP untuk mencegah akses yang tidak dibenarkan, memperincikan amalan terbaik dan mengesyorkan alat peningkatan keselamatan.

Penyulitan PHP: Penyulitan simetri vs asimetrik. Penyulitan PHP: Penyulitan simetri vs asimetrik. Mar 25, 2025 pm 03:12 PM

Artikel ini membincangkan penyulitan simetri dan asimetrik dalam PHP, membandingkan kesesuaian, prestasi, dan perbezaan keselamatan mereka. Penyulitan simetri lebih cepat dan sesuai untuk data pukal, manakala asimetrik digunakan untuk pertukaran utama yang selamat.

Bagaimana anda mengambil data dari pangkalan data menggunakan PHP? Bagaimana anda mengambil data dari pangkalan data menggunakan PHP? Mar 20, 2025 pm 04:57 PM

Artikel membincangkan mendapatkan data dari pangkalan data menggunakan PHP, meliputi langkah, langkah keselamatan, teknik pengoptimuman, dan kesilapan umum dengan penyelesaian.

PHP CSRF Perlindungan: Bagaimana untuk mencegah serangan CSRF. PHP CSRF Perlindungan: Bagaimana untuk mencegah serangan CSRF. Mar 25, 2025 pm 03:05 PM

Artikel ini membincangkan strategi untuk mencegah serangan CSRF di PHP, termasuk menggunakan token CSRF, kuki tapak yang sama, dan pengurusan sesi yang betul.

Apakah tujuan mysqli_query () dan mysqli_fetch_assoc ()? Apakah tujuan mysqli_query () dan mysqli_fetch_assoc ()? Mar 20, 2025 pm 04:55 PM

Artikel ini membincangkan fungsi mysqli_query () dan mysqli_fetch_assoc () dalam PHP untuk interaksi pangkalan data MySQL. Ia menerangkan peranan, perbezaan, dan memberikan contoh praktikal penggunaannya. Hujah utama memberi tumpuan kepada manfaat usin

See all articles