当前位置:

首页 > 编程开发 > thinkphp5怎么加layui实现图片上传功能

thinkphp5怎么加layui实现图片上传功能

网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在上传后希望能预览一下看上传的对不对。thinkphp5加layui实现图片上传功能(带图片预览)思路,异步传输图片并预览,将异步上传后的值返回表单隐藏域再提交。1、引入文件首先,要引入jQuery文件,这是必须的2、HTML部分上传图片

本文目录

    网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在上传后希望能预览一下看上传的对不对。

    thinkphp5加layui实现图片上传功能(带图片预览)思路,异步传输图片并预览,将异步上传后的值返回表单隐藏域再提交。

    1、引入文件

    首先,要引入jQuery文件,这是必须的

    
    

    2、HTML部分

    
    
    	上传图片
    	  />
    	
    
    保存

    3、功能实现

    
    	layui.use(['form','layer','upload'],function(){
    		$ = layui.jquery;
    		var form = layui.form;
    		layer = layui.layer;
    
    		var upload = layui.upload;
       
    		 //执行实例
    		var uploadInst = upload.render({
    			elem: '#upload_img' //绑定元素
    			,url: '/admins.php/admins/video/upload_img' //上传接口
    			,accept:'images'
    			,done: function(res){
    			  //上传完毕回调
    			  $('#pre_img').attr('src',res.msg);
    			  $('input[name="img"]').val(res.msg);
    			}
    			,error: function(){
    			  //请求异常回调
    			}
    		});
    	});
    
    	// 保存
    	function save(){
    		var title = $.trim($('input[name="title"]').val());
    		var url = $.trim($('input[name="url"]').val());
    		if(title == ''){
    			layer.msg('请输入影片名称',{'icon':2,'anim':6});
    			return;
    		}
    		if(url == ''){
    			layer.msg('请输入影片地址',{'icon':2,'anim':6});
    			return;
    		}
    		$.post('/admins.php/admins/video/save',$('form').serialize(),function(res){
    			if(res.code>0){
    				layer.msg(res.msg,{'icon':2,'anim':2});
    			}else{
    				layer.msg(res.msg,{'icon':1});
    				setTimeout(function(){parent.window.location.reload();},1000);
    			}
    		},'json');
    	}
    

    4、后台处理

    图片上传

    public function upload_img(){
    	$file = request()->file('file');
    	if($file==null){
    		exit(json_encode(array('code'=>1,'msg'=>'没有文件上传')));
    	}
    	$info = $file->move(ROOT_PATH.'public'.DS.'uploads');
    	$ext = ($info->getExtension());
    	if(!in_array($ext,array('jpg','jpeg','gif','png'))){
    		exit(json_encode(array('code'=>1,'msg'=>'文件格式不支持')));
    	}
    	$img = '/uploads/'.$info->getSaveName();
    	exit(json_encode(array('code'=>0,'msg'=>$img)));
    }

    保存内容

    public function save(){
    	$id = (int)input('post.id');
    	$data['title'] = trim(input('post.title'));
    	$data['channel_id'] = (int)input('post.channel_id');
    	$data['charge_id'] = (int)input('post.charge_id');
    	$data['area_id'] = (int)input('post.area_id');
    	$data['img'] = trim(input('post.img'));
    	$data['url'] = trim(input('post.url'));
    	$data['keywords'] = trim(input('post.keywords'));
    	$data['desc'] = trim(input('post.desc'));
    	$data['status'] = (int)input('post.status');
    
    	if($data['title'] == ''){
    		exit(json_encode(array('code'=>1,'msg'=>'影片名称不能为空')));
    	}
    	if($data['url'] == ''){
    		exit(json_encode(array('code'=>1,'msg'=>'影片地址不能为空')));
    	}
    
    	if($id){
    		$this->db->table('video')->where(array('id'=>$id))->update($data);
    	}else{
    		$data['add_time'] = time();
    		$this->db->table('video')->insert($data);
    	}
    	exit(json_encode(array('code'=>0,'msg'=>'保存成功')));
    }
    本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系bd@zhengruan.com
    作者最新文章
    编程开发 thinkphp
    上一篇: 关于Windows 11的“EdgeOS”假截图与现实的相似性探讨
    下一篇: linux下如何停止mysql服务
    相关文章 更多
    thinkphp写接口代码的完整开发实例教程
    thinkphp写接口代码的完整开发实例教程

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

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

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

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

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

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

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

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

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

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

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

    thinkphp排序怎么实现倒序排列 教程简单易懂
    thinkphp排序怎么实现倒序排列 教程简单易懂

    ThinkPHP 实现倒序排列,说穿了就是 order() 方法配合 desc 方向,一句话的事儿,根本不需要什么复杂的循环或额外逻辑。 来看看最直接的方式:用 order('字段名 desc') 搞定。这招的好处是数据库层直接干活,效率高,逻辑也清晰。比如你想让文章列表按照发布时间从新到旧排,那就

    TP5.1 项目接入 LDAP 实现后台管理员统一认证【企业】
    TP5.1 项目接入 LDAP 实现后台管理员统一认证【企业】

    在企业系统逐渐转向统一身份认证的背景下,ThinkPHP 5.1 项目接入 LDAP 实现后台管理员统一认证,是不少团队正在推进的标准化改造。核心思路并不复杂——把框架默认基于数据库的账号校验逻辑彻底换掉,让登录请求直接交给企业 LDAP 目录服务来完成验证。说白了,不是简单改个密码字段,而是要重构

    TP5.1 项目启用 HttpOnly 防范 XSS 攻击【安全头】
    TP5.1 项目启用 HttpOnly 防范 XSS 攻击【安全头】

    在基于TP5.1框架的项目开发中,通过全局配置Cookie的HTTP只读属性、手动设置特定Cookie、修改PHP配置文件强制会话Cookie启用HTTP只读属性,并结合跨站脚本攻击入口过滤,能够有效地防范跨站脚本攻击窃取Cookie,形成多层次纵深防御体系。

    thinkphp排序如何按创建时间排序 配置指南
    thinkphp排序如何按创建时间排序 配置指南

    ThinkPHP中按创建时间排序可通过order()方法实现,支持固定排序、多字段组合及带GET参数的动态排序。分页时需传递query参数保持页码。按天聚合可使用orderRaw()配合DATE_FORMAT函数。对于数组数据,可用array_multisort或usort结合strtotime进行排序。时间格式需统一。

    查看更多
    精品专题 更多
    装机必备
    装机必备

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

    Windows
    Windows

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

    PDF教程
    PDF教程

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

    Mac软件 更多
    讯飞智作 网页版
    讯飞智作 网页版
    Windows/ macOS/ Linux

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版
    Windows/ macOS/ Linux

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    Aperty macOS版
    Aperty macOS版
    macOS

    Aperty 是 Skylum 推出的 AI 人像修图软件,支持自然肤质修饰、瑕疵处理、面部与身体调整、预设及批量同步。

    WINDOWS 更多
    讯飞智作 网页版
    讯飞智作 网页版
    Windows/ macOS/ Linux

    讯飞智作是一款基于语音合成技术、虚拟人驱动技术与数字人形象声音构建能力的 AI 数字人音视频创作平台。

    火山引擎 网页版
    火山引擎 网页版
    Windows/ macOS/ Linux

    火山引擎是字节跳动旗下企业级云与AI服务平台。聚焦大模型核心能力,依托字节自研豆包多模态大模型,凭借火山方舟一站式平台,提供模型精调、推理部署、智能应用搭建等全链路服务,结合高性能AI算力,助力各行业快速落地大模型数字化与智能化应用。

    PixTV 网页版
    PixTV 网页版
    Windows

    PixTV 是一款在浏览器中使用的 AI 视觉内容创作平台,提供图片、视频、音频、文字生成、AI 分镜、局部重绘、提示词反推和无限画布等工具,适合短剧、漫剧、广告及社交媒体内容制作。