关键词:
layui现学现用一段时间发现还挺好用的。对一些不复杂的功能来说还算是方便。
记录一下上传图片方式,layui集成了图片上传及预览的方式。
看看效果图
前端HTML代码,用于展示上传图片按钮及预览的位置; 还带进度条哦...
<div class="layui-upload" style="margin-left: 110px;margin-bottom: 30px;">
<button type="button" class="layui-btn" id="uploadImg">上传图片</button>
<div style="display:none;">
<input type="text" name="img_url" id="ipt_fileName" autocomplete="off" class="layui-input">
</div>
<div class="layui-upload-list">
<img class="layui-upload-img" id="img_id">
<p id="demoText"></p>
</div>
<div style="width: 95px;">
<div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="upload_filter">
<div class="layui-progress-bar" lay-percent=""></div>
</div>
</div>
</div>
JS方面需要声明 upload 上传、下载功能
即
layui.use(['form','upload'], function ()
var form = layui.form;
var $ = layui.jquery
, upload = layui.upload;
);
上传图片JS方法
//常规使用 - 普通图片上传
var uploadInst = upload.render(
elem: '#uploadImg'
, url: '上传接口'
, before: function (obj)
//预读本地文件示例,不支持ie8
obj.preview(function (index, file, result)
$('#img_id').attr('src', result); //图片
);
element.progress('upload_filter', '0%'); //进度条
layer.msg('上传中', icon: 16, time: 0 );
, done: function (res)
if (res.code > 0)
return layer.msg('上传失败');
$('#demoText').html(''); //置空上传失败的状态
$("#ipt_fileName").val(res.msg);
, error: function ()
//展示失败状态,并重新上传
var demoText = $('#demoText');
demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
demoText.find('.demo-reload').on('click', function ()
uploadInst.upload();
);
//进度条
, progress: function (n, elem, e)
element.progress('upload_filter', n + '%'); //可配合 layui 进度条元素使用
if (n == 100)
layer.msg('上传完毕', icon: 1 );
);
HTML代码跟JS 代码是通过uploadImg 这个ID进行联系的
<button type="button" class="layui-btn" id="uploadImg">上传图片</button>
只需要实现这两步上传图片功能就已经实现了。
后端上传功能用文件流的方式保存到指定地方就可以了,这个百度上也是有很多相应的上传方法。
layui上传图片带接口(代码片段)
layui.use(‘upload‘,function()varupload=layui.upload;upload.render(elem:‘#LAY_avatarUpload‘,url:setter.apiDomain+‘/api/WxPay/UploadFileByStream_Head‘,choose:function(obj)//将每次选择的文件追加到文件队列varfiles=ob 查看详情
layui的图片上传使用(代码片段)
先上效果图。虽然还是有点BUG明天再调 在用之前呢,你得先更新最新版的layui版本。经验之谈_(:_」∠)_ 今天在用的时候,实在是碰到太多的坑,本来是拒绝更新到最新版来着。首先是layui.js和layui.all.js的问题。这个是什... 查看详情
springboot+layui图片上传以及预览(代码片段)
前端html代码<divclass="layui-col-md3"style="margin-left:150px;margin-top:100px"><divclass="layui-upload-listuserFace"><inputid="imgpath"name& 查看详情
layui上传图片(代码片段)
...好用的。对一些不复杂的功能来说还算是方便。记录一下上传图片方式,layui集成了图片上传及预览的方式。看看效果图 前端HTML代码,用于展示上传图片按钮及预览的位置; 还带进度条哦...<divclass="layui-uplo... 查看详情
基于layui的图片上传前预览功能的2种实现方式(代码片段)
上传页面采用了layui的上传模块,要实现的功能:选择文件后---点击文件名,页面中间弹窗内预览图片,先看效果图:预览功能的实现具体有2种方式:第一种是用blob+FileReader,第二种是layUI自带的。1.用layUI自带的参数实现图片预... 查看详情
layui上传图片(文件)的时候,上传多张图片(文件)会调用多次接口,而我们想要让上传多个文件的时候只调用一次接口,怎么解决?(代码片段)
文章目录LayUI上传图片(文件)的时候,上传多张图片(文件)会调用多次接口,而我们想要让上传多个文件的时候只调用一次接口,怎么解决?如何把调用多次接口改为调用一次接口前端使用LayUi... 查看详情
springboot+layui图片上传以及预览(代码片段)
...utton"><iclass="layui-icon"></i>上传头像</button></div>前端js代码u 查看详情
springboot+layui图片上传以及预览(代码片段)
...utton"><iclass="layui-icon"></i>上传头像</button></div>前端js代码u 查看详情
layui——上传图片,并实现放大预览(代码片段)
一般上传文件后会返回文件的路径,然后存储到数据库,那么首先实现上传后的放大和删除功能functionuploadSmallPic()varupload=layui.upload;upload.render(elem:‘#smallPic‘,url:‘/upload/uploadPic‘,auto:false,number:1,bindAction:‘#uploadSmallPic‘,choos... 查看详情
layui文件上传回调前对文件类型及大小判断(代码片段)
1.关于layui.upload的before上传前对文件类型及文件大小判断,阻止默认上传实现方法【下图代码是对图片上传是宽高限制处理】:layui.use([‘upload‘,‘form‘],function()varupload=layui.upload;varform=layui.form;upload.render(elem:‘#uploadCover‘,url:‘... 查看详情
多图上传控制器及模型代码thinkphp5+layui实现多图上传保存到数据库,可以实现图片自由排序,自由删除。(代码片段)
公共css代码<style>.layui-upload-imgwidth:90px;height:90px;margin:0;.pic-morewidth:100%;left;margin:10px0px0px0px;.pic-moreliwidth:90px;float:left;margin-right:5px;.pic-moreli.layui-inputdispl 查看详情
layuiupload多图片上传,传参后台接受不到(代码片段)
Layuiupload动态传参,后台接收不到,解决方法这里参数动态($(#).val())拿去不到,除非写死,必须要用before从新赋值layui.config(base:‘/Assets/layui/‘//静态资源所在路径).extend(index:‘lib/index‘//主入口模块).use([‘index‘,‘upload‘],functio... 查看详情
jquery图片灯箱和视频灯箱(代码片段)
在一些前端页面中经常需要文件上传,为了美观,我们经常做一个灯箱来显示我们选择的文件,而不是简单的input标签。html代码:这个是多图片上传<divclass="layui-form-item"><divfor="0"class="layui-form-label"><spanclass="x-red">*<... 查看详情
关于layui图片/文件上传
一:常规使用 普通文件上传(传入服务器一张图片)1.前台代码:<!DOCTYPEhtml><html><head><metacharset="utf-8"/><linkhref="../layui/css/layui.css"rel="stylesheet"/><title></title>& 查看详情
类百度富文本编辑器文件上传。(代码片段)
在项目安开发中,有一个需求是用户需上传特定的text文件,根据此文件判断设备的状态。以上是需求,此时需要在页面上用到文件上传的功能,原始的文件上传样式不好看,自己此段时间一直都在用layui前端框架写页面,本想用... 查看详情
定教你学会上传图片(代码片段)
Q1:需要导入到包 需要的联系我,我发给你。(里面需要的包和文件确实有点多) layui,jquery 当然还要有images文件 序列化文件lib里面总图片: Q2:html文件(NewFile.html)<!DOCTYPEhtml><html><head><metacharset... 查看详情
layui多图片怎么按名称顺序上传
参考技术A这个跟layui没关系,后台代码可以获取到上传文件的文件名,然后存库的时候再根据文件名排个序保存就可以了. 查看详情
layui多图上传实现删除功能的方法(代码片段)
...-upload"><buttontype="button"class="layui-btn"id="test2">多图片上传</button><blockquoteclass="layui-elem-quotelayui-quote-nm"style="margin-top:10px;width:88%">预览图:<divclass="layui-upload-listuploader-list"style="overflow:auto;"id="uploader-list"></div>&l... 查看详情