php如何实现多图上传预览_php前端js配合后端临时存储与回显-php教程-PHP中文网

php如何实现多图上传预览_php前端js配合后端临时存储与回显

雪夜

发布： 2025-11-27 21:19:02

原创

234人浏览过

首先实现前端多图选择与实时预览，通过input[file]和FileReader读取文件并展示缩略图；接着使用FormData异步上传至PHP后端，将文件存入temp_uploads目录并返回文件名；然后通过get_temp_images.php扫描目录，页面加载时重新渲染已上传的临时图片，实现刷新回显；最后建议增加文件校验、过期清理和用户隔离机制以提升安全性与稳定性。

php如何实现多图上传预览_php前端js配合后端临时存储与回显

实现多图上传并预览，需要前端 JavaScript 实时展示用户选择的图片，后端 PHP 接收文件并临时存储，同时支持页面刷新后回显已上传的临时图片。以下是完整的实现方案。

前端 JS 实现多图选择与实时预览

使用 HTML 的 input[type=file] 支持多选，并通过 JavaScript 读取文件生成预览图。

HTML 部分：

zuojiankuohaophpcninput type="file" id="imageUpload" multiple accept="image/*">
<div id="previewContainer"></div>

JavaScript 部分（原生 JS）：

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

const input = document.getElementById('imageUpload');
const preview = document.getElementById('previewContainer');

input.addEventListener('change', function() {
    preview.innerHTML = ''; // 清空之前的预览
    const files = this.files;

    Array.from(files).forEach(file => {
        if (!file.type.match('image.*')) return;

        const reader = new FileReader();
        reader.onload = function(e) {
            const img = document.createElement('img');
            img.src = e.target.result;
            img.style.width = '100px';
            img.style.height = '100px';
            img.style.margin = '5px';
            preview.appendChild(img);
        };
        reader.readAsDataURL(file);
    });
});

登录后复制

PHP 后端接收并临时存储上传图片

前端通过 FormData 提交文件，PHP 将其保存到临时目录（如 temp_uploads/），并返回文件名用于后续处理。

改进的 JS：添加上传功能

Remusic

Remusic - 免费的AI音乐、歌曲生成工具

514

查看详情

// 添加上传按钮
// <button onclick="uploadImages()">上传图片</button>

function uploadImages() {
    const files = input.files;
    const formData = new FormData();

    Array.from(files).forEach(file => {
        formData.append('images[]', file);
    });

    fetch('upload.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        console.log('上传成功:', data);
        loadTempImages(); // 上传后刷新回显
    })
    .catch(error => {
        console.error('上传失败:', error);
    });
}

登录后复制

PHP 处理脚本（upload.php）：

<?php
$uploadDir = 'temp_uploads/';
if (!is_dir($uploadDir)) {
    mkdir($uploadDir, 0777, true);
}

$response = ['success' => [], 'error' => []];
$files = $_FILES['images'] ?? null;

if ($files && !empty($files['name'][0])) {
    $count = count($files['name']);

    for ($i = 0; $i < $count; $i++) {
        $tmpName = $files['tmp_name'][$i];
        $originalName = $files['name'][$i];
        $fileName = uniqid('img_') . '_' . time() . '.' . pathinfo($originalName, PATHINFO_EXTENSION);
        $filePath = $uploadDir . $fileName;

        if (in_array(mime_content_type($tmpName), ['image/jpeg', 'image/png', 'image/gif'])) {
            if (move_uploaded_file($tmpName, $filePath)) {
                $response['success'][] = $fileName;
            } else {
                $response['error'][] = $originalName;
            }
        } else {
            $response['error'][] = $originalName . ' 不是有效图片';
        }
    }
}

echo json_encode($response);

登录后复制

页面加载时回显已上传的临时图片

用户刷新页面后，从服务器获取已上传的临时图片列表并重新生成预览。

JS 加载已上传图片：

function loadTempImages() {
    fetch('get_temp_images.php')
        .then(response => response.json())
        .then(images => {
            const preview = document.getElementById('previewContainer');
            images.forEach(fileName => {
                const img = document.createElement('img');
                img.src = 'temp_uploads/' + fileName;
                img.dataset.filename = fileName;
                img.style.width = '100px';
                img.style.height = '100px';
                img.style.margin = '5px';
                preview.appendChild(img);
            });
        });
}

// 页面加载时执行
window.onload = function() {
    loadTempImages();
};

登录后复制

get_temp_images.php 获取临时目录中的图片文件名：

<?php
$dir = 'temp_uploads/';
$images = [];

if (is_dir($dir)) {
    foreach (scandir($dir) as $file) {
        if (in_array(pathinfo($file, PATHINFO_EXTENSION), ['jpg', 'jpeg', 'png', 'gif'])) {
            $images[] = $file;
        }
    }
}
echo json_encode($images);

登录后复制