引言

图片上传

1. 准备工作

首先，确保你的服务器支持PHP和文件上传功能。以下是一个简单的PHP环境搭建步骤：

  • 安装Apache或Nginx服务器。
  • 安装PHP。
  • 安装PHP的文件上传扩展（如fileinfo、openssl等）。

2. HTML表单

<form action="upload.php" method="post" enctype="multipart/form-data">
  <input type="file" name="image" accept="image/*">
  <input type="submit" value="上传">
</form>

3. PHP上传处理

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (isset($_FILES['image'])) {
        $file = $_FILES['image'];
        $fileTmpName = $file['tmp_name'];
        $fileSize = $file['size'];
        $fileError = $file['error'];
        $fileType = $file['type'];

        $fileExt = strtolower(end(explode('.', $file['name'])));
        $allowedExts = array('jpg', 'jpeg', 'png', 'gif');

        if (in_array($fileExt, $allowedExts)) {
            if ($fileError === 0) {
                if ($fileSize < 5000000) {
                    $fileNameNew = uniqid('', true) . '.' . $fileExt;
                    $fileDestination = 'uploads/' . $fileNameNew;

                    move_uploaded_file($fileTmpName, $fileDestination);
                    echo "文件上传成功！";
                } else {
                    echo "文件过大，请上传小于5MB的文件。";
                }
            } else {
                echo "文件上传出错。";
            }
        } else {
            echo "不支持的文件类型。";
        }
    } else {
        echo "未选择文件。";
    }
}
?>

4. 保存上传的图片

图片预览

1. HTML预览

<img id="preview" src="" alt="图片预览" style="display:none; max-width:200px; max-height:200px;">

2. JavaScript预览

使用JavaScript读取文件对象，并更新<img>标签的src属性：

function previewImage() {
    var preview = document.querySelector('#preview');
    var file = document.querySelector('input[type=file]').files[0];
    var reader = new FileReader();

    reader.onloadend = function () {
        preview.src = reader.result;
    };

    if (file) {
        reader.readAsDataURL(file);
        preview.style.display = 'block';
    } else {
        preview.src = "";
    }
}

3. PHP预览

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // ...其他代码...

    if ($fileError === 0 && $fileSize < 5000000 && in_array($fileExt, $allowedExts)) {
        $fileDestination = 'uploads/' . $fileNameNew;
        echo "<img src='" . $fileDestination . "' alt='上传的图片'>";
    }
}

总结