PHP 有预览图片功能的多张图片上传 前台后台代码
时间: 2024-10-18 14:08:05 浏览: 20
PHP 提供了处理图片上传的功能,并且可以实现预览多张图片。这里是一个简单的前台前端(HTML)和后台后端(PHP)代码示例:
**前台 HTML (index.php)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<title>图片上传</title>
<style>
img {
max-width: 100px;
max-height: 100px;
}
</style>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
<input type="file" name="images[]" multiple />
<br/>
<input type="submit" value="Upload Images">
</form>
<!-- 图片预览区域 -->
<div id="preview"></div>
<script>
function previewImages() {
var inputs = document.querySelectorAll('input[type=file]');
Array.from(inputs).forEach(input => {
input.addEventListener('change', function() {
var files = this.files;
var previewArea = document.getElementById('preview');
previewArea.innerHTML = '';
if(files.length > 0) {
for(let i = 0; i < files.length; i++) {
let file = files[i];
let imgElement = document.createElement('img');
imgElement.src = URL.createObjectURL(file);
imgElement.onload = function() {URL.revokeObjectURL(this.src);};
previewArea.appendChild(imgElement);
}
}
});
});
}
previewImages();
</script>
</body>
</html>
```
**后台 PHP (upload.php)**
```php
<?php
if(isset($_FILES['images']) && $_FILES['images']['error'] === UPLOAD_ERR_OK) {
$dir = 'uploads/';
if(!is_dir($dir)) mkdir($dir, 0755);
foreach($_FILES['images']['tmp_name'] as $key => $tmp_name) {
$image_info = getimagesize($tmp_name);
$ext = strtolower(pathinfo($image_info['filename'], PATHINFO_EXTENSION));
$new_file_name = uniqid() . '.' . $ext;
move_uploaded_file($tmp_name, $dir . $new_file_name);
// 可在此处存储文件信息到数据库,如果需要的话
}
echo "图片已成功上传!";
} else {
echo "上传失败,请检查上传的文件.";
}
?>
```
这个例子中,前端用户可以选择并预览多张图片,然后提交表单至`upload.php`,后台接收上传的文件,将其保存到指定目录,同时返回上传成功的消息。
**相关问题--:**
1. 如何限制PHP图片上传的最大尺寸?
2. 这段代码如何防止文件名冲突?
3. 怎么样将图片数据直接显示到页面上而不是先存储到服务器再读取?
阅读全文