Layui中基本元素和组件(文件上传，即时通讯等)总结
总览
这里只举几个例子，更多案例请去Layui官网查看！
文件上传
<html>
<head><meta charset="utf-8"><title>Layuititle><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="css/layui.css" media="all">
head>
<body><blockquote class="layui-elem-quote">为节省服务器开销，以下示例均未配置真实上传接口，所以每次上传都会报提示：请求上传接口出现异常，这属于正常现象。blockquote> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>常规使用：普通图片上传legend>
fieldset><div class="layui-upload"><button type="button" class="layui-btn" id="test1">上传图片button><div class="layui-upload-list"><img class="layui-upload-img" id="demo1"><p id="demoText">p>div>
div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>上传多张图片legend>
fieldset><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><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>指定允许上传的文件类型legend>
fieldset><button type="button" class="layui-btn" id="test3"><i class="layui-icon">i>上传文件button>
<button type="button" class="layui-btn layui-btn-primary" id="test4"><i class="layui-icon">i>只允许压缩文件button>
<button type="button" class="layui-btn" id="test5"><i class="layui-icon">i>上传视频button>
<button type="button" class="layui-btn" id="test6"><i class="layui-icon">i>上传音频button>
<div style="margin-top: 10px;">
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620">ins>div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>设定文件大小限制legend>
fieldset> <button type="button" class="layui-btn layui-btn-danger" id="test7"><i class="layui-icon">i>上传图片button>
<div class="layui-inline layui-word-aux">这里以限制 60KB 为例
div><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>同时绑定多个元素，并将属性设定在元素上legend>
fieldset> <button class="layui-btn demoMore" lay-data="{url: '/a/'}">上传Abutton>
<button class="layui-btn demoMore" lay-data="{url: '/b/', size:5}">上传Bbutton>
<button class="layui-btn demoMore" lay-data="{url: '/c/', accept: 'file',size:10}">上传Cbutton><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>选完文件后不自动上传legend>
fieldset><div class="layui-upload"><button type="button" class="layui-btn layui-btn-normal" id="test8">选择文件button><button type="button" class="layui-btn" id="test9">开始上传button>
div>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>拖拽上传legend>
fieldset> <div class="layui-upload-drag" id="test10"><i class="layui-icon">i><p>点击上传，或将文件拖拽到此处p><div class="layui-hide" id="uploadDemoView"><hr><img src="" alt="上传成功后渲染" style="max-width: 196px">div>
div><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>高级应用：制作一个多文件列表legend>
fieldset> <div class="layui-upload"><button type="button" class="layui-btn layui-btn-normal" id="testList">选择多文件button> <div class="layui-upload-list"><table class="layui-table"><thead><tr><th>文件名th><th>大小th><th>状态th><th>操作th>tr>thead><tbody id="demoList">tbody>table>div><button type="button" class="layui-btn" id="testListAction">开始上传button>
div> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;"><legend>绑定原始文件域legend>
fieldset> <input type="file" name="file" id="test20"><script src="//res.layui.com/layui/dist/layui.js" charset="utf-8">script>
<script>
layui.use('upload', function(){var $ = layui.jquery,upload = layui.upload;//普通图片上传var uploadInst = upload.render({elem: '#test1',url: 'https://httpbin.org/post' //改成您自己的上传接口,before: function(obj){//预读本地文件示例，不支持ie8obj.preview(function(index, file, result){$('#demo1').attr('src', result); //图片链接（base64）});},done: function(res){//如果上传失败if(res.code > 0){return layer.msg('上传失败');}//上传成功},error: function(){//演示失败状态，并实现重传var demoText = $('#demoText');demoText.html('上传失败 重试');demoText.find('.demo-reload').on('click', function(){uploadInst.upload();});}});//多图片上传upload.render({elem: '#test2',url: 'https://httpbin.org/post' //改成您自己的上传接口,multiple: true,before: function(obj){//预读本地文件示例，不支持ie8obj.preview(function(index, file, result){$('#demo2').append('
+ result +'" alt="'+ file.name +'" class="layui-upload-img">')});},done: function(res){//上传完毕}});//指定允许上传的文件类型upload.render({elem: '#test3',url: 'https://httpbin.org/post' //改成您自己的上传接口,accept: 'file' //普通文件,done: function(res){layer.msg('上传成功');console.log(res);}});upload.render({ //允许上传的文件后缀elem: '#test4',url: 'https://httpbin.org/post' //改成您自己的上传接口,accept: 'file' //普通文件,exts: 'zip|rar|7z' //只允许上传压缩文件,done: function(res){layer.msg('上传成功');console.log(res)}});upload.render({elem: '#test5',url: 'https://httpbin.org/post' //改成您自己的上传接口,accept: 'video' //视频,done: function(res){layer.msg('上传成功');console.log(res)}});upload.render({elem: '#test6',url: 'https://httpbin.org/post' //改成您自己的上传接口,accept: 'audio' //音频,done: function(res){layer.msg('上传成功');console.log(res)}});//设定文件大小限制upload.render({elem: '#test7',url: 'https://httpbin.org/post' //改成您自己的上传接口,size: 60 //限制文件大小，单位 KB,done: function(res){layer.msg('上传成功');console.log(res)}});//同时绑定多个元素，并将属性设定在元素上upload.render({elem: '.demoMore',before: function(){layer.tips('接口地址：'+ this.url, this.item, {tips: 1});},done: function(res, index, upload){var item = this.item;console.log(item); //获取当前触发上传的元素，layui 2.1.0 新增}})//选完文件后不自动上传upload.render({elem: '#test8',url: 'https://httpbin.org/post' //改成您自己的上传接口,auto: false//,multiple: true,bindAction: '#test9',done: function(res){layer.msg('上传成功');console.log(res)}});//拖拽上传upload.render({elem: '#test10',url: 'https://httpbin.org/post' //改成您自己的上传接口,done: function(res){layer.msg('上传成功');layui.$('#uploadDemoView').removeClass('layui-hide').find('img').attr('src', res.files.file);console.log(res)}});//多文件列表示例var demoListView = $('#demoList'),uploadListIns = upload.render({elem: '#testList',url: 'https://httpbin.org/post' //改成您自己的上传接口,accept: 'file',multiple: true,auto: false,bindAction: '#testListAction',choose: function(obj){ var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列//读取本地文件obj.preview(function(index, file, result){var tr = $(['+ index +'">',''+ file.name +' ',''+ (file.size/1024).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.files.file){ //上传成功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'); //显示重传}});//绑定原始文件域upload.render({elem: '#test20',url: 'https://httpbin.org/post' //改成您自己的上传接口,done: function(res){layer.msg('上传成功');console.log(res)}});});
script>body>
html>
即时通讯
<html>
<head><meta charset="utf-8"><title>Layuititle><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><link rel="stylesheet" href="/css/layui.css" media="all">
head>
<body><blockquote class="layui-elem-quote">
注意：LayIM 是基于 layui 的一款独立的付费组件，它是网页即时通讯 UI 解决方案，您购买授权后得到的是一套前端源代码，而服务端程序需自写。blockquote><fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;"><legend>面板外的操作示例legend>
fieldset><div class="site-demo-button"><button class="layui-btn site-demo-layim" data-type="chat">自定义会话button><button class="layui-btn site-demo-layim" data-type="message">接受好友的消息button><button class="layui-btn site-demo-layim" data-type="messageAudio">接受音频消息button><button class="layui-btn site-demo-layim" data-type="messageVideo">接受视频消息button><button class="layui-btn site-demo-layim" data-type="messageTemp">接受临时会话消息button><br><button class="layui-btn site-demo-layim" data-type="add">申请好友button><button class="layui-btn site-demo-layim" data-type="addqun">申请加群button><button class="layui-btn site-demo-layim" data-type="addFriend">同意好友button><button class="layui-btn site-demo-layim" data-type="addGroup">增加群组到主面板button><button class="layui-btn site-demo-layim" data-type="removeFriend">删除主面板好友button><button class="layui-btn site-demo-layim" data-type="removeGroup">删除主面板群组button><br><button class="layui-btn site-demo-layim" data-type="setGray">置灰离线好友button><button class="layui-btn site-demo-layim" data-type="unGray">取消好友置灰button><a href="http://layim.layui.com/kefu.html" class="layui-btn site-demo-layim" target="_blank">客服模式a><button class="layui-btn site-demo-layim" style="background-color: #3FDD86" data-type="mobile">移动端版本演示button>
div> <script src="layui.js" charset="utf-8">script>
<script>
layui.use('layim', function(){var layim = layui.layim;//演示自动回复var autoReplay = ['您好，我现在有事不在，一会再和您联系。', '你没发错吧？face[微笑] ','洗澡中，请勿打扰，偷窥请购票，个体四十，团体八折，订票电话：一般人我不告诉他！face[哈哈] ','你好，我是主人的美女秘书，有什么事就跟我说吧，等他回来我会转告他的。face[心] face[心] face[心] ','face[威武] face[威武] face[威武] face[威武] ','<（@￣︶￣@）>','你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。','face[黑线] 你慢慢说，别急……','(*^__^*) face[嘻嘻] ，是贤心吗？'];//基础配置layim.config({//初始化接口init: {url: '/layim/json/getList.json',data: {}}//查看群员接口,members: {url: '/layim/json/getMembers.json',data: {}},uploadImage: {url: '' //（返回的数据格式见下文）,type: '' //默认post},uploadFile: {url: '' //（返回的数据格式见下文）,type: '' //默认post},isAudio: true //开启聊天工具栏音频,isVideo: true //开启聊天工具栏视频//扩展工具栏,tool: [{alias: 'code',title: '代码',icon: ''}]//,brief: true //是否简约模式（若开启则不显示主面板）//,title: 'WebIM' //自定义主面板最小化时的标题//,right: '100px' //主面板相对浏览器右侧距离//,minRight: '90px' //聊天面板最小化时相对浏览器右侧距离,initSkin: '3.jpg' //1-5 设置初始背景//,skin: ['aaa.jpg'] //新增皮肤//,isfriend: false //是否开启好友//,isgroup: false //是否开启群组//,min: true //是否始终最小化主面板，默认false//,notice: true //是否开启桌面消息提醒，默认false//,voice: false //声音提醒，默认开启，声音文件为：default.mp3,msgbox: '/layim/demo/msgbox.html' //消息盒子页面地址，若不开启，剔除该项即可,find: '/layim/demo/find.html' //发现页面地址，若不开启，剔除该项即可,chatLog: '/layim/demo/chatlog.html' //聊天记录页面地址，若不开启，剔除该项即可});//监听在线状态的切换事件layim.on('online', function(status){layer.msg(status);});//监听签名修改layim.on('sign', function(value){layer.msg(value);});//监听自定义工具栏点击，以添加代码为例layim.on('tool(code)', function(insert){layer.prompt({title: '插入代码 - 工具栏扩展示例',formType: 2,shade: 0}, function(text, index){layer.close(index);insert('[pre class=layui-code]' + text + '[/pre]'); //将内容插入到编辑器});});//监听layim建立就绪layim.on('ready', function(res){//console.log(res.mine);layim.msgbox(5); //模拟消息盒子有新消息，实际使用时，一般是动态获得});//监听发送消息layim.on('sendMessage', function(data){var To = data.to;//console.log(data);if(To.type === 'friend'){layim.setChatStatus('对方正在输入。。。');}//演示自动回复setTimeout(function(){var obj = {};if(To.type === 'group'){obj = {username: '模拟群员'+(Math.random()*100|0),avatar: layui.cache.dir + 'images/face/'+ (Math.random()*72|0) + '.gif',id: To.id,type: To.type,content: autoReplay[Math.random()*9|0]}} else {obj = {username: To.name,avatar: To.avatar,id: To.id,type: To.type,content: autoReplay[Math.random()*9|0]}layim.setChatStatus('在线');}layim.getMessage(obj);}, 1000);});//监听查看群员layim.on('members', function(data){//console.log(data);});//监听聊天窗口的切换layim.on('chatChange', function(res){var type = res.data.type;console.log(res.data.id)if(type === 'friend'){//模拟标注好友状态//layim.setChatStatus('在线');} else if(type === 'group'){//模拟系统消息layim.getMessage({system: true,id: res.data.id,type: "group",content: '模拟群员'+(Math.random()*100|0) + '加入群聊'});}});//面板外的操作var $ = layui.jquery, active = {chat: function(){//自定义会话layim.chat({name: '小闲',type: 'friend',avatar: '//tva3.sinaimg.cn/crop.0.0.180.180.180/7f5f6861jw1e8qgp5bmzyj2050050aa8.jpg',id: 1008612});layer.msg('也就是说，此人可以不在好友面板里');},message: function(){//制造好友消息layim.getMessage({username: "贤心",avatar: "//tp1.sinaimg.cn/1571889140/180/40030060651/1",id: "100001",type: "friend",content: "嗨，你好！欢迎体验LayIM。演示标记："+ new Date().getTime(),timestamp: new Date().getTime()});},messageAudio: function(){//接受音频消息layim.getMessage({username: "王小贤",avatar: "https://tvax3.sinaimg.cn/crop.0.0.996.996.180/006Ftl1oly8g8ckqshrgjj30ro0rojst.jpg?KID=imgbed,tva&Expires=1576236580&ssig=6IEtTJL5so",id: "76543",type: "friend",content: "audio[http://gddx.sc.chinaz.com/Files/DownLoad/sound1/201510/6473.mp3]",timestamp: new Date().getTime()});},messageVideo: function(){//接受视频消息layim.getMessage({username: "王小贤",avatar: "https://tvax3.sinaimg.cn/crop.0.0.996.996.180/006Ftl1oly8g8ckqshrgjj30ro0rojst.jpg?KID=imgbed,tva&Expires=1576236580&ssig=6IEtTJL5s",id: "76543",type: "friend",content: "video[http://www.w3school.com.cn//i/movie.ogg]",timestamp: new Date().getTime()});},messageTemp: function(){//接受临时会话消息layim.getMessage({username: "小酱",avatar: "//tva1.sinaimg.cn/crop.7.0.736.736.50/bd986d61jw8f5x8bqtp00j20ku0kgabx.jpg",id: "198909151014",type: "friend",content: "临时："+ new Date().getTime()});},add: function(){//实际使用时数据由动态获得layim.add({type: 'friend',username: '马化腾',avatar: '//tva1.sinaimg.cn/crop.0.0.720.720.180/005JKVuPjw8ers4osyzhaj30k00k075e.jpg',submit: function(group, remark, index){layer.msg('好友申请已发送，请等待对方确认', {icon: 1,shade: 0.5}, function(){layer.close(index);});//通知对方/*$.post('/im-applyFriend/', {uid: info.uid,from_group: group,remark: remark}, function(res){if(res.status != 0){return layer.msg(res.msg);}layer.msg('好友申请已发送，请等待对方确认', {icon: 1,shade: 0.5}, function(){layer.close(index);});});*/}});},addqun: function(){layim.add({type: 'group',username: 'LayIM会员群',avatar: '//tva2.sinaimg.cn/crop.0.0.180.180.50/6ddfa27bjw1e8qgp5bmzyj2050050aa8.jpg',submit: function(group, remark, index){layer.msg('申请已发送，请等待管理员确认', {icon: 1,shade: 0.5}, function(){layer.close(index);});//通知对方/*$.post('/im-applyGroup/', {uid: info.uid,from_group: group,remark: remark}, function(res){});*/}});},addFriend: function(){var user = {type: 'friend',id: 1234560,username: '李彦宏' //好友昵称，若申请加群，参数为：groupname,avatar: '//tva4.sinaimg.cn/crop.0.0.996.996.180/8b2b4e23jw8f14vkwwrmjj20ro0rpjsq.jpg' //头像,sign: '全球最大的中文搜索引擎'}layim.setFriendGroup({type: user.type,username: user.username,avatar: user.avatar,group: layim.cache().friend //获取好友列表数据,submit: function(group, index){//一般在此执行Ajax和WS，以通知对方已经同意申请//……//同意后，将好友追加到主面板layim.addList({type: user.type,username: user.username,avatar: user.avatar,groupid: group //所在的分组id,id: user.id //好友ID,sign: user.sign //好友签名});layer.close(index);}});},addGroup: function(){layer.msg('已成功把[Angular开发]添加到群组里', {icon: 1});//增加一个群组layim.addList({type: 'group',avatar: "//tva3.sinaimg.cn/crop.64.106.361.361.50/7181dbb3jw8evfbtem8edj20ci0dpq3a.jpg",groupname: 'Angular开发',id: "12333333",members: 0});},removeFriend: function(){layer.msg('已成功删除[凤姐]', {icon: 1});//删除一个好友layim.removeList({id: 121286,type: 'friend'});},removeGroup: function(){layer.msg('已成功删除[前端群]', {icon: 1});//删除一个群组layim.removeList({id: 101,type: 'group'});}//置灰离线好友,setGray: function(){layim.setFriendStatus(168168, 'offline');layer.msg('已成功将好友[马小云]置灰', {icon: 1});}//取消好友置灰,unGray: function(){layim.setFriendStatus(168168, 'online');layer.msg('成功取消好友[马小云]置灰状态', {icon: 1});}//移动端版本,mobile: function(){var device = layui.device();var mobileHome = '/layim/demo/mobile.html';if(device.android || device.ios){return location.href = mobileHome;}var index = layer.open({type: 2,title: '移动版演示 （或手机扫右侧二维码预览）',content: mobileHome,area: ['375px', '667px'],shadeClose: true,shade: 0.8,end: function(){layer.close(index + 2);}});layer.photos({photos: {"data": [{"src": "http://cdn.layui.com/upload/2016_12/168_1481056358469_50288.png",}]},anim: 0,shade: false,success: function(layero){layero.css('margin-left', '350px');}});}};$('.site-demo-layim').on('click', function(){var type = $(this).data('type');active[type] ? active[type].call(this) : '';});
});
script>body>
html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！