ThinkPHP结合ajaxFileUpload实现异步图片上传完整教程

结果或目标

用户在前端点击按钮选择图片后，无需刷新页面即可将图片上传至服务器指定目录，并在预览区即时显示上传后的图片。整个过程由JavaScript后台处理，提升用户体验。

准备条件

1. 技术栈： ThinkPHP框架（文中基于TP5语法），jQuery库，ajaxFileUpload插件。
2. 服务器环境： 确保Web服务器对 uploads 目录拥有写入权限。
3. 依赖文件： 需要获取 jquery.min.js 和 ajaxfileupload.js 文件。

真实操作顺序

第1步：引入必要的JS文件

在页面头部或底部引入jQuery和ajaxFileUpload插件。注意必须保证jQuery在先，插件在后。

<script src="__ADMIN__/js/jquery.min.js?v=2.1.4"></script>
<script src="__ADMIN__/js/ajaxfileupload.js"></script>

注：__ADMIN__ 为ThinkPHP模板变量，实际部署时需替换为正确的静态资源路径。

第2步：构建HTML表单结构

创建一个包含隐藏 <input type="file"> 的元素，并通过自定义按钮触发文件选择。同时预留一个 <img> 标签用于显示上传后的缩略图。

<div class="form-group">
    <label class="col-sm-2 control-label">缩略图</label>
    <div class="col-sm-8">
        <div id="file-pretty">
            <div>
                <!-- 隐藏的原始file input -->
                <input type="file" id="file_thumb" name="thumb" class="form-control" style="display: none;" value="">
                <div class="input-append input-group">
                    <span class="input-group-btn">
                        <!-- 自定义触发按钮 -->
                        <button id="btn_thumb" class="btn btn-white" type="button">选择图片</button>
                    </span>
                    <!-- 显示文件名/路径的文本框 -->
                    <input id="info_thumb" name="thumb" class="input-large form-control" type="text" value="{$info.img}">
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-2">
        <!-- 图片预览区域 -->
        <img id="show_thumb" src="/uploads/image/{$info.thumb}" style="height: 30px;" alt="">
    </div>
</div>

第3步：编写前端JS逻辑（核心）

利用jQuery监听“选择图片”按钮的点击事件以触发文件选择；监听文件输入框的 change 事件，校验文件格式后调用 $.ajaxFileUpload。

<script type="text/javascript">
$(function(){
    // 1. 触发隐藏的文件选择器
    $("#btn_thumb").click(function(){
        $("#file_thumb").click();
    });

    // 2. 监听文件变化，执行上传
    $("body").delegate('#file_thumb', 'change', function(){
        var filepath = $(this).val();
        var arr = filepath.split('.');
        var ext = arr[arr.length-1]; // 获取扩展名

        // 限制允许的格式
        if('gif|jpg|png|bmp'.indexOf(ext) >= 0){
            $.ajaxFileUpload({
                url: '/admin/slide/upload_image', // 后端接口URL
                secureurl: false,
                fileElementId: 'file_thumb',     // 对应HTML中input的id
                dataType: 'json',               // 期望返回的数据类型
                data: {name: 'thumb'},          // 额外传递的参数
                success: function (data, status){
                    // data 预期为后端返回的文件名字符串
                    $("#info_thumb").val(data);
                    $("#show_thumb").attr('src','/uploads/images/'+data);
                    $("#info_thumb").focus();
                },
                complete: function (XMLHttpRequest){
                    // 可选：处理完成回调
                },
                error: function (data, status, e){
                    layer.alert('上传失败!'); // 需引入layer提示库或自行实现提示
                }
            });
        } else {
            $("#file_thumb").val(""); // 清空已选文件
            layer.alert('请上传合适的图片类型(gif/jpg/png/bmp)!');
        }
    });
});
</script>

第4步：后端处理（ThinkPHP PHP代码）

在控制器中接收上传的文件。ThinkPHP 5.x及以上版本推荐使用 request() 辅助函数或实例来处理文件。

// 控制器方法示例
public function upload_image(){
    // 获取前端传递的文件字段名称
    $name = input('name'); 
    
    // 获取上传的文件对象
    $file = request()->file($name);
    
    try {
        // 移动文件到指定目录，自动重命名为随机字符串+原后缀
        // ROOT_PATH . 'public/uploads/images' 为目标存储路径
        $info = $file->move(ROOT_PATH . 'public/uploads/images');
        
        if ($info) {
            // 返回保存后的文件名供前端使用
            // 注意：前端接收的是JSON格式的字符串或对象
            return json(['status' => 1, 'data' => $info->getSaveName()]);
        } else {
            return json(['status' => 0, 'msg' => $file->getError()]);
        }
    } catch (\Exception $e) {
        return json(['status' => 0, 'msg' => '系统错误']);
    }
}

关键点说明：

• 原文代码中使用 return json_encode(...) 直接返回字符串在某些AJAX库配置下可能导致解析问题，建议严格遵循后端返回标准JSON对象（如上述改进版代码），并在前端成功回调中取用 data.data。
• 确保目标目录 public/uploads/images 存在且可写。

第5步：前台展示（列表页调用）

上传成功后，数据存入数据库。在前台循环渲染时，读取数据库中存储的图片路径进行展示。

<div id="slideshow">
  <ul class="rslides" id="slider">
    {volist name="data" id="vo"}
    <li>
      <a href="{$vo.url}" target="_blank" rel="external nofollow">
        <img src="__UPLOADS__/images/{$vo.img}" alt="{$vo.title}">
      </a>
      <p class="slider-caption">{$vo.title}</p>
    </li>
    {/volist}
  </ul>
</div>

简要总结

通过使用ajaxFileUpload插件模拟iframe提交机制，可以完美解决传统Form提交导致页面刷新的问题。结合ThinkPHP强大的文件处理能力，只需寥寥数行代码即可完成高可用的图片上传模块。需要注意的是，随着现代浏览器的发展，原生 Fetch API 配合 FormData 已成为更标准的异步上传方案，但在维护旧项目或使用特定UI组件时，本文提供的方案依然具备重要的参考价值。

以上就是ThinkPHP结合ajaxFileUpload实现ajax异步图片传输全套代码的详细内容，更多关于Thinkphp加ajaxFileUpload实现图片上传的内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！