简单图片上传带留言功能php
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片上传系统</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input, textarea {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: white;
padding: 12px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
.image-item {
border: 1px solid #ddd;
padding: 20px;
margin: 15px 0;
border-radius: 10px;
background-color: #f9f9f9;
}
.uploaded-image {
max-width: 400px;
max-height: 400px;
margin: 10px 0;
}
.upload-time {
color: #666;
font-size: 14px;
margin: 5px 0;
}
.comment-section {
margin-top: 15px;
padding: 15px;
background-color: #fff;
border: 1px solid #e0e0e0;
border-radius: 5px;
}
.comment-form {
margin-bottom: 15px;
}
.comment-item {
padding: 10px;
margin: 5px 0;
background-color: #f8f9fa;
border-left: 4px solid #007bff;
border-radius: 3px;
}
.comment-time {
font-size: 12px;
color: #666;
}
.success {
color: green;
font-weight: bold;
margin: 10px 0;
}
.error {
color: red;
font-weight: bold;
margin: 10px 0;
}
</style>
</head>
<body>
<div>
<h1>图片上传系统</h1>
<?php
// 定义文件存储路径
$upload_dir = 'uploads/';
$data_file = 'image_data.json';
// 初始化目录和文件
if (!is_dir($upload_dir)) {
mkdir($upload_dir, 0755, true);
}
if (!file_exists($data_file)) {
file_put_contents($data_file, '[]');
}
// 处理表单提交
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_POST['submit_image'])) {
// 处理图片上传
if (isset($_FILES['image']) && $_FILES['image']['error'] == 0) {
$filename = uniqid() . '_' . basename($_FILES['image']['name']);
$target_path = $upload_dir . $filename;
if (move_uploaded_file($_FILES['image']['tmp_name'], $target_path)) {
$upload_time = date('Y-m-d H:i:s');
// 准备图片数据
$image_data = [
'id' => uniqid(),
'filename' => $filename,
'original_name' => $_FILES['image']['name'],
'upload_time' => $upload_time,
'comments' => []
];
// 读取现有数据
$existing_data = json_decode(file_get_contents($data_file), true) ?: [];
$existing_data[] = $image_data;
// 保存数据
if (file_put_contents($data_file, json_encode($existing_data, JSON_PRETTY_PRINT))) {
echo "<p>图片上传成功！</p>";
} else {
echo "<p>数据保存失败</p>";
}
} else {
echo "<p>图片上传失败</p>";
}
} else {
echo "<p>请选择有效的图片文件</p>";
}
}
// 处理留言提交
if (isset($_POST['submit_comment']) && !empty($_POST['comment_text'])) {
$image_id = $_POST['image_id'];
$comment_text = $_POST['comment_text'];
$comment_time = date('Y-m-d H:i:s');
$data = json_decode(file_get_contents($data_file), true) ?: [];
foreach ($data as &$item) {
if ($item['id'] == $image_id) {
$item['comments'][] = [
'text' => $comment_text,
'time' => $comment_time
];
}
}
if (file_put_contents($data_file, json_encode($data, JSON_PRETTY_PRINT))) {
echo "<p>留言添加成功！</p>";
} else {
echo "<p>留言保存失败</p>";
}
}
}
?>
<!-- 图片上传表单 -->
<form method="post" enctype="multipart/form-data">
<div>
<label for="image">选择图片：</label>
<input type="file" id="image" name="image" accept="image/*" required>
</div>
<button type="submit" name="submit_image">上传图片</button>
</form>
<hr>
<!-- 图片列表 -->
<h2>已上传的图片</h2>
<?php
$data = json_decode(file_get_contents($data_file), true) ?: [];
if (!empty($data)) {
foreach (array_reverse($data) as $item) {
?>
<div>
<h3><?php echo htmlspecialchars($item['original_name']); ?></h3>
<img src="<?php echo $upload_dir . $item['filename']; ?>" alt="上传的图片">
<p>上传时间：<?php echo $item['upload_time']; ?></p>
<!-- 留言区域 -->
<div>
<h4>留言板</h4>
<form method="post">
<input type="hidden" name="image_id" value="<?php echo $item['id']; ?>">
<textarea name="comment_text" rows="3" placeholder="写下你的留言..." required></textarea>
<button type="submit" name="submit_comment">添加留言</button>
</form>
<?php if (!empty($item['comments'])): ?>
<h5>历史留言：</h5>
<?php foreach (array_reverse($item['comments']) as $comment): ?>
<div>
<p><?php echo htmlspecialchars($comment['text']); ?></p>
<small><?php echo $comment['time']; ?></small>
</div>
<?php endforeach; ?>
<?php else: ?>
<p>暂无留言</p>
<?php endif; ?>
</div>
</div>
<?php
}
} else {
echo "<p>还没有上传任何图片</p>";
}
?>
</div>
<script>
// 图片预览功能
document.getElementById('image').addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function(e) {
// 移除旧的预览
const oldPreview = document.querySelector('.temp-preview');
if (oldPreview) oldPreview.remove();
// 创建新预览
const img = document.createElement('img');
img.src = e.target.result;
img.className = 'uploaded-image temp-preview';
img.style.display = 'block';
e.target.parentNode.appendChild(img);
};
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>