当前位置：

首页 > 编程开发 > Thinkphp和ajaxFileUpload如何结合实现异步图片上传和显示？

Thinkphp和ajaxFileUpload如何结合实现异步图片上传和显示？

作者：RiverSoul 时间：2023-04-24 来源：正软商城浏览：2

1、引用文件先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。2、HTML代码缩略图选择图片

本文目录

1、引用文件

先引入jQuery与ajaxFileUpload插件。注意先后顺序，这个不用说了，所有的插件都是这样。

2、HTML代码

3、JS代码

    
	    $(function(){
	        $("#btn_thumb").click(function(){
	            $("#file_thumb").click();
	        });

	        //异步上传
	        $("body").delegate('#file_thumb', 'change', function(){
	            var filepath = $("input[name='thumb']").val();
	            var arr = filepath.split('.');
	            var ext = arr[arr.length-1];
	            //alert(filepath);exit();

	            if('gif|jpg|png|bmp'.indexOf(ext)>=0){
	                $.ajaxFileUpload({
	                  url: '/admin/slide/upload_image',
	                  secureurl: false,
	                  fileElementId: 'file_thumb', //file标签ID
	                  dataType: 'json', //返回数据类型
	                  data:{name:'thumb'},
	                  success:function (data,status){
	                      $("#info_thumb").val(data);
	                      $("#show_thumb").attr('src','/uploads/images/'+data);
	                      $("#info_thumb").focus();
	                  },
	                  complete:function (XMLHttpRequest){

	                  },
	                  error:function (data,status,e){
	                      layer.alert('上传失败!');
	                  },
	              });
	            } else {
	                //清空file
	                $("#file_thumb").val("");
	                layer.alert('请上传合适的图片类型!');
	            }

	        });
	    });

4、后台处理（PHP）

    //单文件（包含单文件）异步上传
    public function upload_image(){
        //图片上传
        $file = request()->file(input('name'));
        $info = $file->move(ROOT_PATH . 'public/uploads/images');
        if($info) {
            return json_encode($info->getSaveName());
        }
    }

5、前台调用


  
    {volist name="data" id="vo"}
     
      {$vo.title}
    
    {/volist}

本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系bd@zhengruan.com

作者最新文章

PixTV网页入口 PixTVAI视频生成使用要点 2026-11-08 10:55

国行Apple智能开放前要确认什么？设备、系统与功能范围 2026-11-05 16:15

Fences桌面激活教程：输入许可证密钥与验证步骤详解 2026-11-01 12:25

RTX 5070双风扇设计，小机箱也能装 2026-10-27 11:05

漫蛙漫画app下载安装最新版本 2026-10-13 13:19

编程开发 thinkphp

上一篇：如何解决Xbox应用在准备屏幕上卡住的问题？这里提供一些解决方案。

下一篇： java处理数据库不支持emoji表情符怎么解决

相关文章更多

thinkphp写接口代码的完整开发实例教程

本教程以ThinkPHP框架为例，通过文章管理API的具体业务场景，详细拆解路由定义、数据验证、控制器逻辑、数据模型操作、统一响应结构与全局异常处理的完整接口开发全流程。

2026-10-17 16 慢热型风吹麦浪

thinkphp 接口开发

thinkphp项目部署指南详解服务器部署步骤

详细解析ThinkPHP项目在Linux服务器上的部署步骤，包括环境搭建、文件权限、Nginx配置及常见陷阱，提供可复制的代码示例与例外场景分析。

2026-09-23 29 NorthWalker

Linux thinkphp PHP nginx 运维

IE浏览器怀旧版在线网址

IE浏览器怀旧版在线网址：一次精准的技术时光回溯最近，不少老用户和怀旧爱好者在反复搜索一个问题：那个经典的Internet Explorer，如今还能在哪里原汁原味地体验到？答案指向一个特定的地址：https://ie.microsoft.com/legacy/。这个网站远不止是一个简单的“皮肤

2026-08-17 9 水悠悠予安

Windows CSS IE浏览器 Java JavaScript html 编码

Spring MVC+ajax进行信息验证的方法

采用AJAX与SpringMVC的异步验证，通过XMLHttpRequest对象实现局部数据交换，利用@ResponseBody返回JSON或字符串，结合@RequestBody解析请求体，完成表单无刷新校验，包括用户名重复检测与密码一致性验证。该方法提升交互效率，减少带宽占用，有效确保数据准确性，提升用户体验。

2026-07-23 2 RiverSoul

PHP - AJAX 与 PHP

AJAX使网页无需整体刷新即可与服务器交换数据并局部更新，实现无刷新体验。通过PHP实例，用户在输入框键入字符时，JavaScript创建XMLHttpRequest对象向PHP文件发送请求，服务器查找匹配姓名并返回结果，实现实时提示。跨域请求需采用JSONP或CORS解决方案。

2026-07-20 3 OpenWorld

PHP firefox

如何防止 AJAX 请求缓存导致动态内容无法实时更新

使用jQuery的.load()方法定时刷新页面时，浏览器或服务器缓存可能导致动态内容无法实时更新。通过为每次请求附加毫秒级时间戳参数，可强制URL变化绕过缓存。需注意时间戳参数必须置于片段选择器之前，且服务端响应头不应设置长时间缓存。

2026-07-18 4 RiverSoul

为什么 TP6.0 模型关联为空？with 预加载与查询作用域的使用【ORM】

ThinkPHP6.0模型关联返回null的常见原因包括：with闭包遗漏外键和主键字段、嵌套预加载语法不兼容低版本、关联方法内部误用with或field导致数据失控，以及全局作用域与软删除未显式处理。通过检查SQL日志、显式声明关键字段、升级版本或改用正确语法、清理关联方法中的查询条件即可解决。

2026-07-15 12 SoftHope

thinkphp

TP6.0 构建支持断点续传的超大附件上传服务【分片】

在ThinkPHP6.0中实现支持断点续传的超大附件上传，采用分片上传方案。前端按2MB切片并生成唯一chunkId，通过GET请求校验已传分片，用localStorage持久化上传状态。后端控制器接收分片存储，创建upload_status表管理进度，合并时加文件锁并校验MD5，确保生产环境下的可靠性与性能。

2026-07-15 5 水悠悠予安

thinkphp

thinkphp排序怎么实现动态排序开发技巧解析

动态排序时，order()应置于查询链式调用中且必须在paginate()之前；字段和方向需通过白名单硬校验，使用数组语法防SQL注入；分页调用appends()传递参数；多字段排序用关联数组，确保安全稳定。

2026-07-14 14 WarmHope

thinkphp

TP6.0 复杂业务逻辑下事务嵌套的回滚陷阱【DBA】

在复杂业务逻辑中，事务嵌套的回滚问题一直是ThinkPHP开发者容易踩的坑，尤其是TP6.0版本。先说核心结论：TP6.0并不支持真正意义上的嵌套事务。很多人以为调用两次Db::transaction()就能在内部自动管理回滚，实际上这只是一层“伪装”——内层事务的提交或回滚操作会被直接忽略，异常也

2026-07-13 8 OpenWorld

thinkphp

热门文章更多

Photoshop蒙版换证件照背景颜色怎么改？实用操作步骤详解 AutoCAD绘制机械零件三维实体详细教程 AE教程书籍挑选指南：零基础、动效与合成方向实战标准 Photoshop图层合并快捷键是什么？合并盖印及分开图层方法 Photoshop日系调色教程：小清新风格参数与思路

精品专题更多

装机必备

正软商城装机必备专区，精选办公、浏览器、安全防护、影音播放、压缩解压、设计创作和系统工具等电脑常用正版软件，帮助用户快速完成新电脑软件配置。

Windows

正软商城Windows软件专区，汇集适用于Windows电脑的办公、设计、安全防护、影音播放、开发工具和系统优化软件，提供软件介绍、系统要求、正版授权及购买下载服务。

PDF教程

正软商城PDF教程频道提供PDF编辑、转换、合并、拆分、压缩及格式处理方法，同时介绍常用PDF软件和工具的使用技巧。