本项目演示如何使用PHP实现一次性上传多张图片,并自动生成及展示相应缩略图的功能。适合初学者学习文件操作与图像处理技术。
在PHP开发过程中,多图片文件上传是一项常见的需求,在电商平台、社交网络或内容管理系统中尤为常见。本教程将探讨如何使用SWFUpload库实现这一功能,并同时显示上传的缩略图。
SWFUpload是一个JavaScript库,通过Flash组件支持用户进行多文件选择和上传操作,即使在不支持HTML5的浏览器上也能提供良好的用户体验。首先,在前端设置SWFUpload实例时需要创建一个按钮和一个div来承载上传进度信息及结果展示区域:
```html
```
接下来,在JavaScript中初始化SWFUpload实例,配置项包括服务器上传地址、文件类型限制以及大小限制等:
```javascript
var swfuploadInstance = new SWFUpload({
upload_url: upload.php,
file_post_name: file,
file_types: *.jpg;*.jpeg;*.png,
file_size_limit: 2 MB,
flash_url: swfupload.swf,
button_element: swfuploadButton
});
```
当用户选择文件并开始上传时,SWFUpload会将这些信息发送到指定的PHP脚本(例如upload.php)。在该PHP脚本中处理接收到的数据:
```php
$file) {
$target_file = $target_dir . basename($_FILES[file][name][$index]);
if (file_exists($target_file) || !is_writable($target_dir)) { // 检查文件是否已存在或是否有权限写入
die(文件已存在或无法写入);
}
move_uploaded_file($file, $target_file); // 将上传的临时文件移动到目标位置
createThumbnail($target_file);
}
function createThumbnail($sourceFile) {
list ($width, $height) = getimagesize($sourceFile);
$ratio = $width / $height;
if ($ratio > 1) { // 根据原始图片宽高比调整缩略图尺寸
$newWidth = 100;
$newHeight = (int)(100 / $ratio);
} else {
$newHeight = 100;
$newWidth = (int)($width * ($height/100));
}
// 使用GD库生成缩略图
$srcImage=imagecreatefromstring(file_get_contents($sourceFile));
imagecopyresampled(imagecreatetruecolor($newWidth, $newHeight),
$srcImage,
0, 0, 0, 0,
$newWidth, $newHeight,$width,$height);
// 将生成的缩略图保存到特定目录
imagejpeg($srcImage,thumbnails/ . pathinfo($sourceFile)[basename],90);
}
?>
```
在前端,上传成功的文件列表和对应的缩略图可以通过JavaScript动态更新页面内容:
```javascript
swfuploadInstance.setUploadSuccessHandler(function(file, serverData) {
var files = JSON.parse(serverData);
var html =