广告
返回顶部
首页 > 资讯 > 后端开发 > PHP编程 >thinkphp5加layui实现图片上传功能(带图片预览)
  • 257
分享到

thinkphp5加layui实现图片上传功能(带图片预览)

摘要

目录1、引入文件2、html部分3、功能实现4、后台处理图片上传保存内容网站中很多表单都会用到上传图片,loGo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在

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

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

1、引入文件

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

<link rel="stylesheet" type="text/CSS" href="__STATIC__/plugins/layui/css/layui.css" rel="external nofollow" >
<script type="text/javascript" src="__STATIC__/plugins/layui/layui.js"></script>

2、HTML部分

<fORM class="layui-form">
<div class="layui-input-inline">
	<button class="layui-btn layui-btn-sm" onclick="return false;" id="upload_img"><i class="layui-icon">&#xe67c;</i>上传图片</button>
	<img id="pre_img" <?php if($data['item']['img']){echo 'src="'.$data['item']['img'].'"';}?> style="height: 30px;" />
	<input type="hidden" name="img" value="{$data.item.img}">
</div>

	<div class="layui-form-item">
		<div class="layui-input-block">
			<button class="layui-btn" onclick="save()">保存</button>
		</div>
	</div>
</form>

3、功能实现

<script type="text/javascript">
	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');
	}
</script>

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'=>'保存成功')));
}

到此这篇关于thinkphp5加layui实现图片上传功能(带图片预览)的文章就介绍到这了,更多相关thinkphp+layui图片上传内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: thinkphp5加layui实现图片上传功能(带图片预览)

本文链接: https://www.lsjlt.com/news/199334.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • thinkphp5加layui实现图片上传功能(带图片预览)
    目录1、引入文件2、HTML部分3、功能实现4、后台处理图片上传保存内容网站中很多表单都会用到上传图片,logo,照片,用户也会上传图片,这个时候网站就需要一个上传图片的功能,而且在...
    99+
    2023-03-11
    thinkphp5加layui实现图片上传功能 layui图片上传 thinkphp5图片上传
  • thinkphp5怎么加layui实现图片上传功能
    本篇内容介绍了“thinkphp5怎么加layui实现图片上传功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!网站中很多表单都会用到上传图...
    99+
    2023-07-05
  • vue.js如何实现图片上传预览及图片更换功能
    这篇文章将为大家详细讲解有关vue.js如何实现图片上传预览及图片更换功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果图:样式以及效果图一并展示1.HTML<...
    99+
    2022-10-19
    vue.js
  • html5中怎么实现图片上传预览功能
    今天就跟大家聊聊有关html5中怎么实现图片上传预览功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。<!DOCTYPE html&...
    99+
    2022-10-19
    html5
  • JS如何实现上传图片实时预览功能
    这篇文章主要为大家展示了“JS如何实现上传图片实时预览功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“JS如何实现上传图片实时预览功能”这篇文章吧。前段时间在...
    99+
    2022-10-19
    js
  • 如何实现Ajax上传图片及上传前先预览功能
    这篇文章将为大家详细讲解有关如何实现Ajax上传图片及上传前先预览功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。上传之前的预览方式一先来说说图片上传之前的预览问题。这...
    99+
    2022-10-19
    ajax
  • vue.js如何实现图片转Base64上传图片并预览
    这篇文章主要为大家展示了“vue.js如何实现图片转Base64上传图片并预览”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue.js如何实现图片转Base6...
    99+
    2022-10-19
    vue base64
  • jQuery如何实现上传图片前预览效果功能
    这篇文章将为大家详细讲解有关jQuery如何实现上传图片前预览效果功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。效果如图:代码如下:<!doctype ...
    99+
    2022-10-19
    jquery
  • angularjs怎么实现多张图片上传并预览功能
    这篇文章主要介绍angularjs怎么实现多张图片上传并预览功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下directive.js    angu...
    99+
    2022-10-19
    angularjs
  • Html5怎么实现上传本地图片并预览功能
    小编给大家分享一下Html5怎么实现上传本地图片并预览功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!最近工作中需要H5上传显...
    99+
    2022-10-19
    html5
  • React+ajax+java如何实现上传图片并预览功能
    小编给大家分享一下React+ajax+java如何实现上传图片并预览功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!之前有在网上找ajax上传图片的资料,大部...
    99+
    2023-06-08
  • html5怎么实现图片上传预览
    这篇文章主要介绍“html5怎么实现图片上传预览”,在日常操作中,相信很多人在html5怎么实现图片上传预览问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html5怎么实现图...
    99+
    2022-10-19
    html5
  • 详解nodejs实现本地上传图片并预览功能(express4.0+)
    Express为:4.13.1 multyparty: 4.1.2 代码主要实现本地图片上传到nodejs服务器的文件下,通过取图片路径进行图片预览 写在前面:计划实现图片上传预览功能,但是本地图片上传所...
    99+
    2022-06-04
    上传图片 详解 功能
  • Nodejs中怎么实现图片上传和压缩预览功能
    这篇文章给大家介绍Nodejs中怎么实现图片上传和压缩预览功能,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。1、引入基本配置const Koa = req...
    99+
    2022-10-19
    nodejs
  • JQ图片文件上传之如何实现前预览功能
    小编给大家分享一下JQ图片文件上传之如何实现前预览功能,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1、先准备一个divonchange触发事件<input type=&q...
    99+
    2022-10-19
    jquery
  • Vue+SSM实现图片上传预览效果
    现在的需求是:有一个上传文件按钮,当我们点击按钮时,可以选择需要上传的文件,确定后图片显示在界面上。 说明:本项目前端使用的Vue,后台用的SSM搭建的,服务器是Tomcat,数据库...
    99+
    2022-11-12
    vue上传预览 vue图片上传预览 vue图片上传
  • javascript如何实现图片预览和上传
    小编给大家分享一下javascript如何实现图片预览和上传,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!具体内容如下var dailiApply = { ...
    99+
    2022-10-19
    javascript
  • AngularJs如何实现上传前预览图片
    小编给大家分享一下AngularJs如何实现上传前预览图片,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!demo.html:&l...
    99+
    2022-10-19
    angularjs
  • Django实现上传图片功能
    本文实例为大家分享了Django实现上传图片的具体代码,供大家参考,具体内容如下 1.设置存放上传的图片的文件夹 settings.py MEDIA_ROOT = os.path...
    99+
    2022-11-12
    Django 上传图片
  • Android实现图片上传功能
    最近在开发中,涉及到用户的意见反馈功能这一方面的开发,需要用户输入的文字或者提交的图片,效果大概类似于微信朋友圈那样的图片选择器,一开始自己找了个用universal-imag...
    99+
    2022-06-06
    图片上传 图片 Android
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作