首先实现前端多图选择与实时预览，通过input[file]和filereader读取文件并展示缩略图；接着使用formdata异步上传至php后端，将文件存入temp_uploads目录并返回文件名；然后通过get_temp_images.php扫描目录，页面加载时重新渲染已上传的临时图片，实现刷新回显；最后建议增加文件校验、过期清理和用户隔离机制以提升安全性与稳定性。
实现多图上传并预览，需要前端 JavaScript 实时展示用户选择的图片，后端 PHP 接收文件并临时存储，同时支持页面刷新后回显已上传的临时图片。以下是完整的实现方案。
前端 JS 实现多图选择与实时预览
使用 HTML 的 input[type=file] 支持多选，并通过 JavaScript 读取文件生成预览图。
HTML 部分：
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：添加上传功能
// 添加上传按钮
// <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);
注意事项与优化建议
- 临时文件应设置过期机制，例如每天清理超过 24 小时的文件
- 可增加删除临时图片的接口，避免冗余存储
- 生产环境需校验文件大小、限制数量、防止恶意上传
- 考虑使用 session 或数据库标记用户专属临时文件，避免冲突
基本上就这些。通过前端预览 + 后端临时存储 + 回显机制，可以实现流畅的多图上传体验。不复杂但容易忽略细节，比如 MIME 校验和路径安全。
