ThinkPHP5 利用 Ajax 插入图片并实时展示（完整代码）

在 Web 开发中，实现图片的插入并实时展示能极大提升用户体验。本文将详细介绍如何在 ThinkPHP5 框架中利用 Ajax 技术来实现这一功能，并为您提供完整的代码示例。

我们需要创建一个 ThinkPHP5 的项目，并配置好相关的数据库连接等基本信息。

接下来，创建一个表单用于上传图片。在视图文件中，我们可以使用<form>标签，并设置enctype="multipart/form-data"属性，以确保能够正确上传文件。

<form action="" method="post" enctype="multipart/form-data">
    <input type="file" name="image">
    <button type="submit">上传</button>
</form>

然后，在控制器中处理图片上传的逻辑。我们需要获取上传的图片文件，并进行保存。

public function uploadImage()
{
    $file = request()->file('image');
    if ($file) {
        $info = $file->move(ROOT_PATH. 'public/uploads');
        if ($info) {
            $imagePath = $info->getSaveName();
            // 将图片路径保存到数据库或进行其他处理
        } else {
            // 上传失败的处理
        }
    }
}

为了实现实时展示，我们使用 Ajax 来发送图片上传的请求，并在成功后获取图片路径并展示在页面上。

$('form').submit(function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    $.ajax({
        url: '{:url("controller/uploadImage")}',
        type: 'post',
        data: formData,
        contentType: false,
        processData: false,
        success: function(response) {
            // 处理成功的响应，获取图片路径并展示
            var imagePath = response.imagePath;
            $('#image-container').html('<img src="' + imagePath + '" />');
        },
        error: function() {
            // 处理错误情况
        }
    });
});

通过以上的代码实现，当用户选择图片并点击上传按钮后，图片将被上传到指定的目录，并通过 Ajax 实时展示在页面上，无需刷新页面。

希望上述的代码示例和讲解能够帮助您在 ThinkPHP5 中顺利实现利用 Ajax 插入图片并实时展示的功能，为您的 Web 应用增添更好的用户体验。