thinkphp5加layui实现图片上传功能(带图片预览)
发布时间:2023-06-13 01:09:45
标签:thinkphp5,layui,图片上传
网站中很多表单都会用到上传图片,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"></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'=>'保存成功')));
}
0
投稿
猜你喜欢
- 功能:实现网页内容的即时编辑,增加页面的可用性、交互性。方法1:直接通过textarea标签实现,请运行下边代码:<!DOCTYPE
- 很多人可能认为门户网站首页设计只是把一些导航、资讯内容和广告堆积起来摆放得好看就可以了,虽然这个观点也并不是完全错误的,确实门户网站首页是由
- 这篇论坛文章(赛迪网技术社区)主要介绍了一些特别有用但文档中没有介绍的sql server DBCC命令,详细内容请参考下文:以下是一些sq
- 以下摘录自 oreilly.JavaScript.The.Definitive.Guide.5th.Edition.Aug.200
- 本文总结了ASP初学者常犯的几个错误,希望对asp学习者有所帮助!1.记录集关闭之前再次打开:-----------------------
- MySQL字符集出错的解决方法:错误案例: Illegal mix of collations (gbk_chinese_ci,I
- 如何在ADO服务器端利用好缓存技术?请看下面示例,这是一个用来显示图书分类的例子程序:displayBooks.asp< %
- 根据国务院文件,5.19-5.21为全国哀悼日,在此期间,全国和各驻外机构下半旗志哀,停止公共娱乐活动,外交部和我国驻外使领馆设立吊唁簿。5
- 一 安装oracle数据库成功之后,会显示相关的数据库信息: 全局数据库名:oracle 系统标识符(SID):oracle 服务器参数文件
- 内容摘要:本文介绍了使用SQL语句修改数据记录的两种方法,一是使用rs.update,二是使用conn.Execute(sql),相信对初学
- 在默认情况下,MySQL搜索不区分大小写(但某些字符集始终区分大小写,如czech)。这意味着,如果你使用col_name LIKE
- 1.删除所有的目录,只保留datasharebin2.删除BIN下面除以下三个文件之外的所有文件:libmysql.dll(MYSQL5中的
- 偶然看到 Tanel Poder 提到的一个 Metalink Note (438452.1): Performance Tools Qui
- SQL Server 2005相对于SQL Server 2000做了很大的改进,许些新特性是非常实用的。本文中将通过几个具体示例进行详细的
- 方法如下: response.cookies(cookiesname)[(key)|.attribute]=value 解释如下:cooki
- 在许多网页中,当鼠标移到一张图片上时,又弹出另一张图片,做这种广告条,要用到Macromedia DreamWeaver中的Lay
- 为庆祝jQuery的四周年生日,jQuery官方团队正式发布了jQuery 1.4版本。在这个版本中,jQuery官方团队做了大量的编码、测
- 用ASP生成XBM数字图片(可用来生成验证码)XBM图片是一个纯文本的文件,可以用ASP来自动生成。可以用它来使用网站登陆的验证码;我们用记
- 我们今天主要描述的是php和MySQL转义字符,我们大家都知道php和MySQL转义字符的实际应用比例还是占为多数的,如果你对这一技术,心存
- 输入框Input 应当符合逻辑地划分为小组,这样大脑就可以很好的处理大堆区域间的关系。 ——《HTML权威指南》Web 应用程序总是利用表单