什么是layui?
layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式 适合界面的快速开发.
这里以文件上传为例 简单学习使用layui框架
1.准备资源
下载layui官方资源 http://www.layui.com/
2.了解图片/文件上传模块 - layui.upload
上传模块自 layui 2.0 的版本开始，进行了全面重写，这使得它不再那么单一，它所包含的不仅是更为强劲的功能，还有灵活的UI。任何元素都可以作为上传组件来调用，譬如按钮、图片、普通的DIV等等，而不再是一个单调的file文件域。
3.核心方法
使用 upload 模块必须与upload.render(options)方法打交道，其中的options即为基础参数，它是一个对象。
| <script> var upload = layui.upload; //得到 upload 对象
//创建一个上传组件 upload.render({ elem: '#id', url: '', done: function(res, index, upload){ //上传后的回调
} //,accept: 'file' //允许上传的文件类型 //,size: 50 //最大允许上传的文件大小 //,…… }) </script> |
从 layui 2.1.0 开始，允许你直接在元素上设定基础参数，如：
| 【HTML】 <button class="layui-btn test" lay-data="{url: '/a/'}">上传图片</button> <button class="layui-btn test" lay-data="{url: '/b/', accept: 'file'}">上传文件</button>
【JS】 upload.render({ elem: '.test' ,done: function(res, index, upload){ //获取当前触发上传的元素，一般用于 elem 绑定 class 的情况，注意：此乃 layui 2.1.0 新增 var item = this.item; } }) |
4.基本参数
更多支持的参数详见下表，合理的配置它们，应对各式各样的业务需求。
| 参数选项 |
说明 |
类型 |
默认值 |
| elem |
指向容器选择器，如：elem: '#id'。也可以是DOM对象 |
string/object |
- |
| url |
服务端上传接口，返回的数据规范请详见下文 |
string |
- |
| method |
上传接口的 HTTP 类型 |
string |
post |
| data |
请求上传接口的额外参数 |
object |
- |
| accept |
指定允许上传的文件类型，可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频） |
string |
images |
| exts |
允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式 |
string |
jpg|png|gif|bmp|jpeg |
| auto |
是否选完文件后自动上传。如果设定 false，那么需要设置 bindAction 参数来指向一个其它按钮提交上传 |
boolean |
true |
| bindAction |
指向一个按钮触发上传，一般配合 auto: false 来使用。值为选择器或DOM对象，如：bindAction: '#btn' |
string/object |
- |
| field |
设定文件域的字段名 |
string |
file |
| size |
设置文件最大可允许上传的大小，单位 KB。不支持ie8/9 |
number |
0（即不限制） |
| multiple |
是否允许多文件上传。设置 true即可开启。不支持ie8/9 |
boolean |
false |
| drag |
是否接受拖拽的文件上传，设置 false 可禁用。不支持ie8/9 |
boolean |
true |
5. 回调函数
| 参数选项 |
说明 |
类型 |
默认值 |
| choose |
选择文件后的回调函数。返回一个object参数，详见下文 |
function |
- |
| before |
文件提交上传前的回调。返回一个object参数（同上），详见下文 |
function |
- |
| done |
执行上传请求后的回调。返回三个参数，分别为：res（服务端响应信息）、index（当前文件的索引）、upload（重新上传的方法，一般在文件上传失败后使用）。详见下文 |
function |
- |
| error |
执行上传请求出现异常的回调（一般为网络异常、URL 404等）。返回两个参数，分别为：index（当前文件的索引）、upload（重新上传的方法）。详见下文 |
function |
- |
6. 回调参数格式
接口返回的相应信息（response）必须是一个标准的 JSON 格式
| { "code": 0 ,"msg": "" ,"data": { "src": "http://cdn.layui.com/123.jpg" } } |
7.layui图片上传使用步骤
1.创建ssm工程(maven生成项目 省略ssm核心控制器等控制器的配置)
2.导入layui框架
3.pom.xml文件导入(下载响应jar文件)
4.编写上传文件的目录
5.配spring-mvc上传组件
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="maxUploadSize" value="1024000"></property>
<property name="defaultEncoding" value="utf-8"></property>
</bean>
6.编写上传文件的Controller
7.编写上传文件的方法和保存方法
8.编写异步上传的jsp页面
9.设置当前页面相对路径位置到resources目录
10.加载layui框架
| <link rel="stylesheet" type="text/css" href="layui/css/layui.css"> <script type="text/javascript" src="layui/layui.js"></script> |
11.编写HTML代码
| <div class="layui-upload"> <button type="button" class="layui-btn" id="test2" >图片上传</button> <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;"> 预览图： <div class="layui-upload-list" id="demo2"></div> </blockquote> </div> <form action="${pageContext.request.contextPath}/upload/save" method="post" id="saveform"> <input type="submit" value="提交"> </form> |
12.编写js脚本代码
| <script type="text/javascript"> layui.use(['upload'],function(){ var upload = layui.upload, $=layui.$; upload.render({ elem: '#test2' ,url: '${pageContext.request.contextPath}/upload/up' ,multiple: true ,accept:'images' ,exts:'jpg|png|gif|bmp|jpeg' ,size:2048 ,before: function(obj){ //预读本地文件示例，不支持ie8 obj.preview(function(index, file, result){ $('#demo2').append('<img width="80px" src="' + result +'" alt="'+ file.name +'" class="layui-upload-img upload-img">'); }); } ,done: function(res){ $("#saveform").append("<input type='hidden' name='imgs' value='" +res.imgurl+"'>"); } }); }) </script> |