php怎么实现多图上传预览删除-PHP问题-PHP中文网

php怎么实现多图上传预览删除

PHPz

发布： 2023-04-21 09:08:50

原创

1165人浏览过

随着互联网的不断发展，越来越多的网站需要支持多图上传功能，而对于网站来说，实现多图上传功能的同时还需要支持预览和删除功能，这样才能更好地满足用户的需求。本文将介绍如何使用php实现多图上传、预览和删除功能。

一、多图上传功能的实现

HTML代码

在HTML代码中创建一个表单，添加一个input标签，type属性为file，这个标签可以让用户选择需要上传的图片，同时需要添加一个enctype属性，值为“multipart/form-data”，表示表单将会使用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>

登录后复制

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;
  }
}

登录后复制

二、预览功能的实现

立即学习“PHP免费学习笔记（深入）”；

首先需要在页面中显示上传成功的图片，这里使用foreach循环遍历已经上传的图片，并使用HTML img标签将其展示出来。

<div class="uploaded-images">
  <?php foreach ($fileNames as $fileName) { ?>
    <img  src="./uploads/<?php echo $fileName ? alt="php怎么实现多图上传预览删除" >">
  <?php } ?>
</div>

登录后复制

上面的代码会将上传成功的所有图片都展示出来，但是这种方式无法进行一些交互操作，比如鼠标悬停、点击等。因此，我们还需要使用JavaScript来实现这些效果，这里我们使用jQuery来快速实现相应功能。

鼠标悬停时显示删除按钮

使用CSS来设置一个删除按钮，当鼠标悬停在图片上时，显示这个按钮。

Upscale

AI图片放大工具

查看详情

.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 ? alt="php怎么实现多图上传预览删除" >">
  <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();
    }
  });
});

登录后复制

三、删除功能的实现

在点击删除按钮时，触发异步请求将对应的图片从服务器上删除。我们可以在删除前进行一些校验和提示，在发生错误时给出相应的提示信息。

删除校验

在删除之前，我们需要校验一下图片是否存在，如果不存在则不能进行删除操作。

$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">&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中文网其它相关文章！