1. 基础知识准备

在开始之前，确保你已经具备以下基础知识：

  • PHP基础语法和编程概念
  • HTML和CSS基本知识
  • JavaScript基础
  • 了解MySQL数据库的基本操作

2. 图片上传与存储

<form action="upload.php" method="post" enctype="multipart/form-data">
    选择图片：<input type="file" name="image" />
    <input type="submit" value="上传" />
</form>

3. 图片查看功能实现

3.1 图片预览

<img src="path/to/uploaded/image.jpg" alt="图片预览" id="preview" />

3.2 PHP生成图片链接

<?php
$imagePath = "path/to/uploaded/image.jpg";
echo '<img src="' . htmlspecialchars($imagePath) . '" alt="图片查看" />';
?>

这里使用了htmlspecialchars函数来避免跨站脚本攻击（XSS）。

3.3 使用iframe上传图片

  • 创建一个隐藏的iframe元素。
  • 在iframe的src属性中设置一个PHP脚本，该脚本负责处理图片上传并返回图片路径。
  • 在图片上传表单中，将iframe的name设置为表单元素的name，以确保上传的数据能够正确传递到iframe中的PHP脚本。
<iframe name="uploadIframe" style="display:none;"></iframe>
<form action="upload.php" method="post" target="uploadIframe" enctype="multipart/form-data">
    选择图片：<input type="file" name="image" />
    <input type="submit" value="上传" />
</form>

<?php
if ($_FILES['image']['error'] == 0) {
    $imagePath = "path/to/uploaded/" . $_FILES['image']['name'];
    move_uploaded_file($_FILES['image']['tmp_name'], $imagePath);
    echo htmlspecialchars($imagePath);
} else {
    echo "上传失败";
}
?>

4. 实战技巧

  • 使用GD库处理图片，例如调整大小、裁剪或添加水印。
  • 使用ImageMagick库作为GD的替代品，提供更多高级功能。
  • 对上传的图片进行大小和类型的验证，以防止恶意上传。

5. 常见问题及解决方法

5.1 图片无法显示

  • 确保图片路径正确，并且图片文件存在。
  • 检查文件权限，确保服务器可以读取图片文件。
  • 检查浏览器缓存，有时旧的缓存可能导致图片无法显示。

5.2 上传失败

  • 检查PHP配置中的upload_max_filesize和post_max_size设置，确保它们允许上传的文件大小。
  • 检查表单的enctype属性是否设置为multipart/form-data。
  • 确保上传的文件类型符合要求。