php 多图实现
PHP 多图上传实现
在 PHP 中实现多图上传需要处理文件上传表单、接收多个文件数据以及保存文件到服务器。以下是具体实现方法：
创建 HTML 表单
使用 HTML 的 input 标签设置 multiple 属性，允许用户选择多个文件：
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="images[]" multiple>
<input type="submit" value="上传">
</form>处理上传的 PHP 代码
在 upload.php 文件中处理上传的多张图片：
<?php
if(isset($_FILES['images'])){
$errors = [];
$uploadedFiles = [];
$allowedExtensions = ['jpg', 'jpeg', 'png', 'gif'];
foreach($_FILES['images']['tmp_name'] as $key => $tmpName){
$fileName = $_FILES['images']['name'][$key];
$fileSize = $_FILES['images']['size'][$key];
$fileTmp = $_FILES['images']['tmp_name'][$key];
$fileType = $_FILES['images']['type'][$key];
$fileExt = strtolower(pathinfo($fileName, PATHINFO_EXTENSION));
if(in_array($fileExt, $allowedExtensions) === false){
$errors[] = "文件类型 {$fileExt} 不允许";
continue;
}
if($fileSize > 2097152){ // 2MB限制
$errors[] = "文件 {$fileName} 太大";
continue;
}
$destination = "uploads/" . uniqid() . "." . $fileExt;
if(move_uploaded_file($fileTmp, $destination)){
$uploadedFiles[] = $destination;
} else {
$errors[] = "上传 {$fileName} 失败";
}
}
if(!empty($errors)){
print_r($errors);
}
if(!empty($uploadedFiles)){
echo "成功上传的文件:";
print_r($uploadedFiles);
}
}
?>安全注意事项
验证文件类型时不应仅依赖文件扩展名，还应检查文件内容：
$allowedMimeTypes = ['image/jpeg', 'image/png', 'image/gif'];
$fileInfo = finfo_open(FILEINFO_MIME_TYPE);
$mimeType = finfo_file($fileInfo, $fileTmp);
if(!in_array($mimeType, $allowedMimeTypes)){
$errors[] = "文件内容类型 {$mimeType} 不允许";
continue;
}数据库存储
如果需要将上传的图片信息存入数据库，可以这样处理：
$pdo = new PDO('mysql:host=localhost;dbname=yourdb', 'username', 'password');
$stmt = $pdo->prepare("INSERT INTO images (path, uploaded_at) VALUES (?, NOW())");
foreach($uploadedFiles as $filePath){
$stmt->execute([$filePath]);
}批量压缩图片
对于大图上传，可以使用 GD 库或 Imagick 进行压缩：
foreach($uploadedFiles as $filePath){
$image = imagecreatefromjpeg($filePath);
imagejpeg($image, $filePath, 75); // 压缩质量为75%
imagedestroy($image);
}前端预览
使用 JavaScript 实现上传前预览：
document.querySelector('input[type="file"]').addEventListener('change', function(e){
const files = e.target.files;
for(let i = 0; i < files.length; i++){
const reader = new FileReader();
reader.onload = function(event){
const img = document.createElement('img');
img.src = event.target.result;
img.style.maxWidth = '200px';
document.body.appendChild(img);
}
reader.readAsDataURL(files[i]);
}
});以上方法涵盖了从表单创建到后端处理、安全验证以及数据库存储的完整多图上传流程。根据实际需求可以选择性实现各个部分。
