Layui 经典模块化前端框架

什么是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	服务端上传接口，返回的数据规范请详见下文