layui多文件上传讲解_Laravel 使用 layui 文件上传组件批量上传图片
摘要
Laravel 使用 layui 文件上传组件批量上传图片。
layui是一款经典国产模块化前端UI框架,首先看看官方的介绍:
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用。其外在极简,却又不失饱满的内在,体积轻盈,组件丰盈,从核心代码到 API 的每一处细节都经过精心雕琢,非常适合界面的快速开发。layui 首个版本发布于2016年金秋,她区别于那些基于 MVVM 底层的 UI 框架,却并非逆道而行,而是信奉返璞归真之道。准确地说,她更多是为服务端程序员量身定做,你无需涉足各种前端工具的复杂配置,只需面对浏览器本身,让一切你所需要的元素与交互,从这里信手拈来。
使用起来,还是很顺手的,因需要上传图片,就看看文件上传组件如何,首先看官方的文档
接下来就开始动手了,首先你需要准备好一个laravel应用,这里就不做介绍了,接着将下载好的layui文件夹放到应用的public目录中,结构基本如下:
然后我们写好前台文件,直接上代码,我直接写在默认的视图文件中
resources\views\welcome.blade.php
Laravel
.layui-upload-img
{
width: 92px;
height: 92px;
margin: 0 10px 10px 0;
}
高级应用:制作一个多文件列表
选择多文件
文件名大小状态操作
开始上传
预览图:
layui.use('upload', function(){
var $ = layui.jquery
,upload = layui.upload;
//多文件列表示例
var demoListView = $('#demoList')
,uploadListIns = upload.render({
elem: '#testList'
,url: '/upload'
,field:'photo'
,multiple: true
,auto: false
,headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content'),
}
,bindAction: '#testListAction'
,choose: function(obj){
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function(index, file, result){
var tr = $(['
'
,'
'+ file.name +''
,'
'+ (file.size/1014).toFixed(1) +'kb'
,'
等待上传'
,'
'
,'重传'
,'删除'
,'
'
,'
'].join(''));
//单个重传
tr.find('.demo-reload').on('click', function(){
obj.upload(index, file);
});
//删除
tr.find('.demo-delete').on('click', function(){
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值,以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
,done: function(res, index, upload){
if(res.code == 0){ //上传成功
console.log(res.ResultData);
$('#demo2').append('')
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('上传成功');
tds.eq(3).html(''); //清空操作
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
,error: function(index, upload){
var tr = demoListView.find('tr#upload-'+ index)
,tds = tr.children();
tds.eq(2).html('上传失败');
tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
}
});
});
然后新建控制器文件
\app\Http\Controllers\HomeController.php
新建如下方法
public function upload(Request $request)
{
$file = $request->file('photo');
// 获取文件路径
$transverse_pic = $file->getRealPath();
// public路径
$path = public_path('uploads');
// 获取后缀名
$postfix = $file->getClientOriginalExtension();
// 拼装文件名
$fileName = md5(time().rand(0,10000)).'.'.$postfix;
// 移动
if(!$file->move($path,$fileName)){
return response()->json(['ServerNo' => '400','ResultData' => '文件保存失败']);
}
// 这里处理 数据库逻辑
/**
*Store::uploadFile(['fileName'=>$fileName]);
**/
return response()->json(['code'=>0,'ServerNo' => '200','ResultData' => $fileName]);
}
注册路由
\routes\web.php
Route::post('/upload','HomeController@upload');
然后开始演示
可以看出整个过程还是很流畅的,操作起来体验很好。
layui多文件上传讲解_Laravel 使用 layui 文件上传组件批量上传图片相关推荐
- layui多文件上传讲解_layui d多文件上传(示例代码)
借阅 前端代码 选择多文件 图片大小状态操作 不计在线 删除 开始上传 JS 代码 layui.use('upload', function(){ var upload = layui.upload; ...
- 微信小程序图片上传到服务器再自动替换,微信小程序批量上传图片到服务器,并实现预览,删除功能...
js代码 Page({ /** 页面的初始数据 / data: { files: [], //门店图片信息,数组图片保存作为数据源 }, /* 多图片上传 */ chooseImage: functi ...
- 实例讲解ThinkPHP的UploadFile文件上传类的详细用法
ThinkPHP文件上传自带了上传类,使用起来非常方便,我们将以一个文件上传实例来讲解ThinkPHP上传类的实际用法,上传类使用时有详细的中文注释,可以非常方便的告诉你类的一些方法或变量的使用方法. ...
- layui自定义模块、日志打印使用、layui文件上传云服务器
1.layui自定义模块:方便接口调用 异步请求url地址不方便 解决:扩展模块 1):定义对应js文件 ja>lay-module创建http目录创建http.js文件 2): ...
- 尽可能详细的文件上传讲解
尽可能详细的文件上传讲解 文章目录 尽可能详细的文件上传讲解 0x01 upload-labs master的安装 0x02 前端JavaScript检测 0x03 检测文件类型 0x04 根据文件头 ...
- data后缀文件解码_封装ThinkPHP6.0通用文件上传
php中文网最新课程 每日17点准时技术干货分享 本文为php中文网认证作者:"wpj"投稿,欢迎加入php中文网有偿投稿计划! 本文实例讲述了封装ThinkPHP6通用文件上传方 ...
- php 超过100m文件上传,科技常识:apache+php上传大文件以上传100M为例
科技常识:apache+php上传大文件以上传100M为例 2021-03-19 18:54:57 今天小编跟大家讲解下有关apache+php上传大文件以上传100M为例 ,相信小伙伴们对这个话题应 ...
- .net mvc + layui做图片上传(二)—— 使用流上传和下载图片
摘要:上篇文章写到一种上传图片的方法,其中提到那种方法的局限性,就是上传的文件只能保存在本项目目录下,在其他目录中访问不到该文件.这与浏览器的安全性机制有关,浏览器不允许用户用任意的路径访问服务器上的 ...
- Plupload 上传详细讲解,Plupload 多实例上传,Plupload多个上传按钮
Plupload 上传详细讲. Plupload 多实例上传. Plupload 多个上传按钮. Plupload 上传成功获取返回值. DEMO: <!DOCTYPE html> ...
最新文章
- MacBook各个快捷键符号
- html文字自动上翻,jQuery超酷文字随机翻转变换动画特效
- 打印菱形(曼哈顿距离法)
- 2、ShardingSphere 之 Sharding-JDBC实现水平分表
- Pandownload惊喜复活?这一次请你低调使用!
- lpt算法c语言程序,LPT算法的性能(近似).ppt
- Java TheadLocal
- (117)FPGA面试题-使用三态缓冲器实现漏极开路缓冲
- Linux 下 I/O 多路复用技术 epoll
- linux源码安装php,nginx配置php
- 重置浏览器的css,css重置浏览器默认样式
- 笔记本电脑配置知识大全
- Spire.Doc 指定位置插入书签和获取书签内容
- 论文中的Matlab画图常用技巧
- OSChina 周六乱弹 ——程序员想让对象一辈子跟你的秘籍
- 大陆港澳台身份证正则验证
- 信息安全制度管理办法
- 网站链接被微信屏蔽禁止访问的解决办法
- 64位 regsrv win10_64位WINDOWS 10系统下安装Eplan 2.8及注册过程
- android4.4 fragment,在Activity和多个Fragment之间共享资源
热门文章
- 【django 图书信息】
- 华为OD机试题:小朋友高矮排列
- 四目大视场四目夜视镜 --TFN TD401 大视场头盔四目夜视仪 夜视镜 无需转头微光夜视系统 四目四管
- Oracle问题:ORA-01109解决办法
- java jdk 国内下载镜像地址
- 学生成绩查询系统(php+mysql)
- 山世光: 我的Face Zero之梦,写在AlphaGo Zero出世之际
- openwrt linux rootfs 分区表,arm盒子快速移植OpenWrt rootfs
- Error: Can‘t find Python executable “python“, you can set the PYTHON env variable
- 计算机数据采集管理系统的结构和功能,数据采集器有哪些功能?仓库作业管理员必备知识...