layui加tp5图片上传实例
<div class="layui-fluid">
<div class="layui-row">
<form class="layui-form">
<div class="layui-form-item">
<label for="username" class="layui-form-label">
<span class="x-red">*</span>轮播图
</label>
<div class="layui-input-inline">
<button type="button" class="layui-btn" id="add">
<i class="layui-icon"></i>上传图片
</button>
</div>
<div class="layui-form-mid layui-word-aux">
<span class="x-red">*图片格式1920*450</span>
</div>
</div>
<div class="layui-form-item">
<img src="" alt="" id="img" style="width:100%;max-height:450px;">
</div>
<input type="hidden" name="banner" id="banner" value="">
<div class="layui-form-item">
<label for="L_repass" class="layui-form-label">
</label>
<button class="layui-btn" lay-filter="add" lay-submit="">
增加
</button>
</div>
</form>
</div>
</div>
前台代码,创建一个hideen的隐藏input框来接收上传完成的图片路径当点击上传的时候把图片路径插入数据库
layui代码实例
//执行实例
//执行图片上传实例
var uploadInst = upload.render({
elem: '#add' //绑定元素
,url: '{:url('uploads')}' //上传接口
,size: 2048
,choose: function(obj){
//预读本地文件示例,不支持ie8
obj.preview(function(index, file, result){
$('#img').attr('src', result); //图片链接(base64)直接将图片地址赋值给img的src属性
});
// 上传图片时吧旧图片的目录传过去删除
this.data={'id':$("#banner").val()}; },done: function(res){
// 赋值新的图片名
$("#banner").val(res.filename);
//上传完毕回调
// console.log(res);
if(res.code==1){
return layer.msg('图片上传成功,请确认增加');
}else{
return layer.msg('图片上传失败,请刷新后重试');
}
}
,error: function(e){
//请求异常回调
}
});
tp图片接口代码
/**
* [uploads 上传图片接口]
* @return [type] [图片名]
*/
public function uploads(){
$id = input('id');
$file = request()->file('file');
// 移动到框架应用根目录/public/uploads/ 目录下
if($file){
// 有图片上传先删除之前的图片
// 获取上个图片路径
$dir=ROOT_PATH . 'public/uploads/'.$id;
// 如果图片存在则进行删除
if(file_exists($dir)){
@unlink($dir);
}
// 上传新的图片
$info = $this->upload($file);;
$result=[
'code'=>1,
'msg'=>'上传成功',
'filename'=>str_replace('\\', '/',$info)
];
return json_encode($result);
}else{
return false;
} }
方法里的id是如果用户点了第二次上传片,那么就会把第一张上传了的图片执行删除处理,减少服务器空间。
希望这边文章对你们有用
layui加tp5图片上传实例的更多相关文章
- PHP多图片上传实例demo
upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- Thinkphp整合阿里云OSS图片上传实例
Thinkphp3.2整合阿里云OSS图片上传实例,图片上传至OSS可减少服务器压力,节省宽带,安全又稳定,阿里云OSS对于做负载均衡非常方便,不用传到各个服务器了 首先引入阿里云OSS类库 < ...
- PHP结合zyupload多功能图片上传实例
PHP结合zyupload多功能图片上传实例,支持拖拽和裁剪.可以自定义高度和宽度,类型,远程上传地址等. zyupload上传基本配置 $("#zyupload").zyUplo ...
- PHP 多图片上传实例demo
upload.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- layui 富文本 图片上传 后端PHP接口
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/ ...
- webuploader项目中多图片上传实例
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- asp.net图片上传实例
网站后台都需要有上传图片的功能,下面的例子就是实现有关图片上传. 缺点:图片上传到本服务器上,不适合大量图片上传. 第一.图片上传,代码如下: xxx.aspx 复制代码代码如下: <td cl ...
- TP5图片上传
/*图片上传*/ public function upload(){ // 获取表单上传文件 例如上传了001.jpg $file = request()->file('file'); // 移 ...
- Thinkphp框架图片上传实例
https://www.cnblogs.com/wupeiky/p/5802191.html [原文转载自:https://www.cnblogs.com/guoyachao/p/628286 ...
随机推荐
- 面试题总结-Java部分
1 集合 1.1 hashmap原理 HashMap是基于哈希表实现的,每一个元素是一个key-value对,实现了Serializable.Cloneable接口,允许使用null值和null键.不 ...
- android 动画学习总结
本文内容是本人阅读诸多前辈的学习心得后整理的,若有雷同,请见谅 Android 动画 分类:帧动画,补间动画,属性动画 . 1.帧动画 将一张张单独的图片连贯的进行播放,从而在视觉上产生一种动画的效 ...
- ajax无刷新上传和下载
关于ajax无刷新上传和下载 这是一个没什么含量但是又用的比较多又不得不说的问题,其实真的不想说,因为没什么好说的. 关于上传 1.使用Flash,ActiveX 上传 ,略... 2.自己写XMLH ...
- Nmon 监控结果分析
一:CPU信息 SYS_SUMM图表: 1.折线图中蓝线为cpu占有率变化情况:粉线为磁盘IO的变化情况: 2.下面表各种左边的位磁盘的总体数据,包括如下几个: Avg tps during an i ...
- Git 上传本地项目到远程仓库 (工具篇)
前言:前面一开始写了一篇通过命令来操作本地项目上传远程仓库的文章,后来发现此方式没有那么灵活.故跟开发同事请教了下,知道了通过工具来操作更方便.所以写了这篇文章来分享&记录. 前提条件:本地安 ...
- VMware15.5.0安装MacOS10.15.0系统 安装步骤(上)
VMware15.5.0安装MacOS10.15.0系统安装步骤(上)超详细! 说明: 本文是目前最新的安装和调配教程且MacOS10.15和10.16版本搭建方法相同,我也会在一些细节地方加上小技巧 ...
- spring注入bean的几种策略模式
上篇文章Spring IOC的核心机制:实例化与注入我们提到在有多个实现类的情况下,spring是如何选择特定的bean将其注入到代码片段中,我们讨论了按照名称注入和使用@Qualifier 注解输入 ...
- ArcMap 0 (ArcGIS10.2安装)
一如GIS深似海,从此相逢是故人(这句话适合初步接触GIS的,我算是初窥门径.还是道行太浅,只是多了感慨) 前言: 1. 本人GIS专业,对于ArcGIS较为熟悉.由于专业和其它经历需要,接触过不少各 ...
- 面试之JS深拷贝的实现
在面试中你是否遇到过如下场景: Q:小朋友,你是否了解如何拷贝一个对象? R:此时,机智的你可能会想到 Object.assign({}, obj); Q:那如何深拷贝一个对象呢? R:机智的你 JS ...
- Day_10【常用API】扩展案例1_利用人出生日期到当前日期所经过的毫秒值计算出这个人活了多少天
分析以下需求,并用代码实现: 1.从键盘录入一个日期字符串,格式为 xxxx-xx-xx,代表该人的出生日期 2.利用人出生日期到当前日期所经过的毫秒值计算出这个人活了多少天 package com. ...