在PHP开发中，多图片文件上传是一项常见的功能，特别是在创建电商平台、社交网络或者内容管理系统时。本教程将探讨如何利用SWFUpload库实现这一功能，并同时显示上传图片的缩略图。SWFUpload是一个JavaScript库，它允许用户通过Flash组件进行多文件上传，即使在不支持HTML5的浏览器上也能提供良好的用户体验。
我们需要在前端设置SWFUpload实例。在HTML部分，创建一个按钮和一个div来承载上传进度和结果。SWFUpload会将这个div作为文件上传的容器。以下是一个简单的HTML模板：
```html
<div id="flashUploadContainer">
<button id="swfuploadButton">选择图片</button>
<div id="uploadProgress"></div>
<div id="uploadedFiles"></div>
</div>
```
接下来，我们需要在JavaScript中初始化SWFUpload实例。配置项包括服务器URL、文件类型限制、文件大小限制等：
```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会发送POST请求到指定的PHP脚本（这里是"upload.php"）。在PHP端，我们需要处理这些上传的文件：
```php
<?php
$target_dir = "uploads/"; // 上传文件的目标目录
foreach ($_FILES['file']['tmp_name'] as $index => $file) {
$target_file = $target_dir . basename($_FILES['file']['name'][$index]);
// 检查文件是否已存在，是否有权限写入
if (file_exists($target_file) || !is_writable($target_dir)) {
die("文件已存在或无法写入");
}
// 将文件移动到目标目录
if (move_uploaded_file($file, $target_file)) {
// 文件上传成功，生成缩略图
createThumbnail($target_file);
} else {
die("文件上传失败");
}
}
// 创建缩略图函数
function createThumbnail($sourceFile, $thumbnailWidth = 100, $thumbnailHeight = 100) {
list($width, $height) = getimagesize($sourceFile);
$ratio = $width / $height;
if ($ratio > 1) {
$newWidth = $thumbnailWidth;
$newHeight = $thumbnailWidth / $ratio;
} else {
$newHeight = $thumbnailHeight;
$newWidth = $thumbnailHeight * $ratio;
}
$src = imagecreatefromstring(file_get_contents($sourceFile));
$dst = imagecreatetruecolor($newWidth, $newHeight);
imagecopyresampled($dst, $src, 0, 0, 0, 0, $newWidth, $newHeight, $width, $height);
$thumbnailFile = pathinfo($sourceFile, PATHINFO_DIRNAME) . '/thumbnails/' . pathinfo($sourceFile, PATHINFO_BASENAME);
imagejpeg($dst, $thumbnailFile, 90); // 保存缩略图
imagedestroy($src);
imagedestroy($dst);
}
?>
```
在上面的代码中，`createThumbnail`函数负责生成缩略图。它根据原始图片的宽高比调整缩略图尺寸，然后使用GD库进行图像处理，生成新的JPEG图片并保存到`thumbnails`子目录下。
为了在前端展示上传的图片和缩略图，可以在PHP脚本中返回上传成功的文件名列表，然后在JavaScript中动态更新页面内容：
```javascript
swfuploadInstance.setUploadSuccessHandler(function(file, serverData) {
var files = JSON.parse(serverData);
var html = "<ul>";
for (var i = 0; i < files.length; i++) {
html += "<li><img src='thumbnails/" + files[i] + "' alt='' />" + files[i] + "</li>";
}
html += "</ul>";
document.getElementById("uploadedFiles").innerHTML = html;
});
```
以上就是使用PHP和SWFUpload实现多图片上传并显示缩略图的完整流程。在实际项目中，你可能还需要添加错误处理、文件名唯一性检查、权限验证等额外功能。此外，随着HTML5的普及，可以考虑使用`<input type="file" multiple>`和`FormData`对象进行更现代的多文件上传，但对旧版浏览器的支持可能需要SWFUpload这样的库。
- 1
- 2
前往页