PHP 有预览图片功能删除图片功能的多张图片上传 前台后台代码

在PHP中，处理多张图片上传通常涉及到前端HTML表单、AJAX通信以及后端PHP脚本的编写。以下是一个简单的前台和后台代码概述：

**前端（HTML + JavaScript + AJAX）：**

1. HTML 表单：

<form id="uploadForm">
    <input type="file" multiple id="imageFiles" name="images[]"/>
    <button type="submit">上传</button>
    <div id="preview"></div> <!-- 显示预览区域 -->
</form>

2. JavaScript (jQuery 示例)：

$(document).ready(function(){
    $('#uploadForm').on('submit', function(e){
        e.preventDefault(); // 阻止默认提交
        var files = $('#imageFiles')[0].files;
        // 使用FormData发送文件到服务器
        var formData = new FormData();
        for(var i=0; i<files.length; i++){
            formData.append('images[]', files[i]);
        }
        $.ajax({
            url: 'upload.php',
            type: 'POST',
            data: formData,
            processData: false, // 设置允许跨域请求
            contentType: false,
            success: function(response){
                // 在此处处理返回的数据，例如显示预览和操作按钮
            },
            error: function(xhr, status, error){
                console.error(error);
            }
        });
    });
});

**后端（PHP - 上传部分）**:

`upload.php`:

<?php
if(isset($_FILES['images']) && is_array($_FILES['images']['name'])){
    $dir = 'uploads/'; // 存储图片的目录

    foreach ($_FILES['images']['tmp_name'] as $key => $tmp_name) {
        $new_file = uniqid() . '.' . pathinfo($_FILES['images'][$key], PATHINFO_EXTENSION);
        move_uploaded_file($tmp_name, $dir . $new_file); // 将文件移动到指定路径
    }

    // 返回成功或失败信息给前端，如JSON结构
    echo json_encode(array('success' => true, 'message' => '图片上传成功', 'files' => $new_file));
} else {
    echo json_encode(array('success' => false, 'message' => '上传失败，请检查'));
}
?>

为了实现预览功能，可以在前端页面上使用JavaScript读取文件内容生成缩略图，并在成功上传后展示。

至于删除图片功能，可以添加一个新的接口，前端通过AJAX请求该接口，传入需要删除的图片ID，后端根据ID找到对应文件并删除。同时，在数据库中也需要记录每个图片的关联信息以便于管理。