引言

图片上传原理

实现步骤

1. 创建HTML表单

首先，我们需要创建一个HTML表单，允许用户选择文件并进行上传。

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

2. PHP后端处理

<?php
if (isset($_FILES['image'])) {
    $image = $_FILES['image'];
    $target_dir = "uploads/";
    $target_file = $target_dir . basename($image['name']);
    $imageFileType = strtolower(pathinfo($target_file, PATHINFO_EXTENSION));

    // 检查文件类型
    if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
        echo "抱歉，只支持 JPG, JPEG, PNG 和 GIF 文件。";
        exit;
    }

    // 检查文件是否已存在
    if (file_exists($target_file)) {
        echo "抱歉，文件已存在。";
        exit;
    }

    // 移动文件到指定目录
    if (move_uploaded_file($image['tmp_name'], $target_file)) {
        echo "文件上传成功！";
    } else {
        echo "文件上传失败。";
    }
}
?>

3. 实现客户端实时预览

为了实现客户端的实时预览，我们需要使用JavaScript和HTML5的FileReader API。

<script>
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);
    } else {
        preview.src = "";
    }
}
</script>

4. 优化用户体验

为了提高用户体验，我们可以添加一些额外的功能，例如文件大小、显示上传进度等。

总结