轻松掌握PHP图片上传与实时预览技巧，告别传统上传烦恼

图片上传基础

1. 准备工作

2. HTML表单

创建一个HTML表单，用于上传文件。表单需要设置enctype="multipart/form-data"属性，以便服务器正确解析上传的文件。

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

3. PHP处理

在upload.php文件中，使用PHP的$_FILES全局数组来访问上传的文件信息。以下是处理上传的基本步骤：

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['image'])) {
    $uploaddir = './uploads/';
    $uploadfile = $uploaddir . basename($_FILES['image']['name']);

    if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)) {
        echo "文件已成功上传: " . htmlspecialchars($uploadfile);
    } else {
        echo "上传失败，请检查文件类型和大小。";
    }
}
?>

实时预览

1. 使用JavaScript

<input type="file" id="imageInput" accept="image/*">
<img id="preview" src="" alt="图片预览" style="display:none;"/>

<script>
document.getElementById('imageInput').addEventListener('change', function(event) {
    var reader = new FileReader();
    reader.onload = function(e) {
        document.getElementById('preview').src = e.target.result;
        document.getElementById('preview').style.display = 'block';
    };
    reader.readAsDataURL(event.target.files[0]);
});
</script>

2. 修改PHP处理

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['image'])) {
    $uploaddir = './uploads/';
    $uploadfile = $uploaddir . basename($_FILES['image']['name']);

    if (move_uploaded_file($_FILES['image']['tmp_name'], $uploadfile)) {
        echo "文件已成功上传: " . htmlspecialchars($uploadfile);
    } else {
        echo "上传失败，请检查文件类型和大小。";
    }
}
?>

总结