随着互联网的不断发展，越来越多的网站需要支持多图上传功能，而对于网站来说，实现多图上传功能的同时还需要支持预览和删除功能，这样才能更好地满足用户的需求。本文将介绍如何使用PHP实现多图上传、预览和删除功能。
一、多图上传功能的实现
在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代码接受表单提交的图片文件，并将文件上传到服务器上的指定目录中，同时还需要进行数据处理和验证。
// 设置上传目录
$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;
}
}二、预览功能的实现
首先需要在页面中显示上传成功的图片，这里使用foreach循环遍历已经上传的图片，并使用HTML img标签将其展示出来。
<div class="uploaded-images">
<?php foreach ($fileNames as $fileName) { ?>
<img src="./uploads/<?php echo $fileName ?>">
<?php } ?>
</div>上面的代码会将上传成功的所有图片都展示出来，但是这种方式无法进行一些交互操作，比如鼠标悬停、点击等。因此，我们还需要使用JavaScript来实现这些效果，这里我们使用jQuery来快速实现相应功能。
使用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;
}点击删除按钮后，需要将对应的图片从服务器上删除，并将其从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();
}
});
});三、删除功能的实现
在点击删除按钮时，触发异步请求将对应的图片从服务器上删除。我们可以在删除前进行一些校验和提示，在发生错误时给出相应的提示信息。
在删除之前，我们需要校验一下图片是否存在，如果不存在则不能进行删除操作。
$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">×</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中文网其他相关文章！
