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 ...
随机推荐
- Linux分类
Linux versions:http://www.cnblogs.com/sammyliu/articles/4832157.html1. Maintained by organization- D ...
- 第七周CorelDRAW课总结
1.这节课学到了什么知识? "交互式透明工具""交互式阴影工具"以及"交互式调和工具"制作水晶表情包. 2.有什么心得体会? 无 3.存在的 ...
- Leetcode 1. 两数之和 (Python版)
有粉丝说我一个学算法的不去做Leetcode是不是浪费,于是今天闲来没事想尝试一下Leetcode,结果果断翻车,第一题没看懂,一直当我看到所有答案的开头都一样的时候,我意识到了我是个铁憨憨,人家是让 ...
- 图论--网络流--最大流 HDU 2883 kebab(离散化)
Problem Description Almost everyone likes kebabs nowadays (Here a kebab means pieces of meat grilled ...
- 消息队列高手课 -笔记-Kafka高性能的几个关键点
总结下kafka 高性能的几个关键点是: 1:使用批量处理的方式 去提升系统的吞吐能力 2:基于磁盘文件高性能的顺序读写的特性来设计存储结构 3:利用操作系统的PageCache 来缓存数据 减少I ...
- 24款WordPress网站AI插件大盘点
------------恢复内容开始------------ 你想把AI(人工智能)技术和机器学习技术添加到自己的WordPress网站吗?本文中,我会分享24个利用AI技术和机器学习技术的WordP ...
- python语法学习第十天--类与对象相关的BIF、魔法方法
一些相关的BIF: issubclass(class,classInfo)#判断是否为子类,classInfo可以为多个类的元组,其中一个是,返回true,一个类也被认为是自己的子类,object是所 ...
- python爬虫-直播吧
概述 这是一个我很喜欢的小网站,想了解这个网站先从爬虫开始,爬取直播吧所有的栏目及内容,再存入数据库.先写个简单点的,后期再不断的优化下. 准备阶段 直播吧网址https://www.zhibo8.c ...
- python--正则表达式中(.)(*)(.*?)以及re.S的认识
https://yiyibooks.cn/xx/python_352/library/re.html 看command: #-*-coding:gb2312-*- __author__ = 'fuda ...
- SD实现原理学习,以及SD失效的问题解决
SD失效的问题可能解决方案: 1.有可能是图片的url地址不对,有可能浏览器可以打开,但是这个地址浏览器是做了处理的,所以浏览器能打开. 2.如果图片地址是Http,那么就需要关闭ATS. ATS ( ...