引言

图片上传原理

1. 文件上传表单

首先，需要一个HTML表单来实现文件上传。以下是一个简单的上传表单示例：

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

2. PHP处理上传

<?php
if (isset($_FILES['upload'])) {
    $file = $_FILES['upload'];
    $fileType = strtolower(pathinfo($file['name'], PATHINFO_EXTENSION));
    $fileSize = $file['size'];
    $allowedTypes = ['jpg', 'jpeg', 'png', 'gif'];

    if (in_array($fileType, $allowedTypes) && $fileSize <= 5 * 1024 * 1024) {
        $newFileName = uniqid() . '.' . $fileType;
        move_uploaded_file($file['tmp_name'], 'uploads/' . $newFileName);
        echo "上传成功！";
    } else {
        echo "上传失败：文件类型或大小不正确。";
    }
}
?>

实现实时预览

1. 使用JavaScript

<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>

2. HTML结构

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

3. 完整示例

将JavaScript代码和HTML结构整合到表单中：

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="file" name="upload" onchange="previewImage()" />
    <img id="preview" src="" alt="图片预览" style="max-width: 200px; max-height: 200px;" />
    <input type="submit" value="上传" />
</form>

总结