一、准备工作

  1. 创建一个HTML表单，用于上传图片。
  2. 在PHP后端编写代码，接收上传的图片，并对其进行处理。
  3. 使用JavaScript或jQuery在前端显示上传的图片预览。

二、HTML表单创建

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

在这个表单中，我们使用了enctype="multipart/form-data"属性，这是上传文件所必需的。

三、PHP后端处理

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST' && isset($_FILES['file'])) {
    $file = $_FILES['file'];
    $file_name = $file['name'];
    $file_tmp = $file['tmp_name'];
    $file_size = $file['size'];
    $file_error = $file['error'];
    $file_type = $file['type'];

    $file_ext = strtolower(end(explode('.', $file_name)));

    $allowed_types = array('jpg', 'jpeg', 'png', 'gif');
    
    if (in_array($file_ext, $allowed_types)) {
        if ($file_error === 0) {
            if ($file_size <= 2097152) {
                $file_name_new = uniqid('', true) . '.' . $file_ext;
                $file_destination = 'uploads/' . $file_name_new;
                
                if (move_uploaded_file($file_tmp, $file_destination)) {
                    echo "文件上传成功！<br>";
                    echo "<img src='" . $file_destination . "' width='200' height='200'>";
                } else {
                    echo "文件上传失败！";
                }
            } else {
                echo "文件大小不能超过2MB！";
            }
        } else {
            echo "发生错误：" . $file_error;
        }
    } else {
        echo "不支持的文件类型！";
    }
}
?>

在这段代码中，我们首先检查了是否有文件被上传，并且文件类型是允许的。然后，我们使用uniqid()函数生成一个唯一的文件名，以避免文件名冲突。最后，我们使用move_uploaded_file()函数将文件从临时目录移动到我们的服务器上的指定目录。

四、前端图片预览

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

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

五、总结