html5仿钉钉聊天weDingTalk微钉|h5钉聊系统|仿钉钉界面基于web端h5+css3+Zepto+jquery+swiper+wcPop等技术开发的仿钉钉移动办公系统，仿钉钉聊天界面模板，实现了类似钉钉聊天界面，发送消息、表情，预览图片、视频，发送红包，右键长按菜单等功能。][3]// 发送信息function isEmpty() { var html = $editor.html(); html = html.replace(/<br[\s/]{0,2}>/ig, “\r\n”); html = html.replace(/<[^img].*?>/ig, “”); html = html.replace(/ /ig, “”); return html.replace(/\r\n|\n|\r/, “”).replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, “”) == “”;}$(".J__wchatSubmit").on(“click”, function () { // 判断内容是否为空 if (isEmpty()) return; var _html = $editor.html(); var reg = /(http://|https://)((\w|=|?|.|/|&|-)+)/g; _html = _html.replace(reg, “<a href=’$1$2’ target=’_blank’>$1$2</a>”); var msgTpl = [ ‘<li class=“me”>\ <div class=“content”>\ <p class=“author”>风铃子</p>\ <div class=“msg”>’+ _html +’</div>\ </div>\ <a class=“avatar” href=“微钉-好友主页(详细资料).html”><img src=“img/uimg/u__chat-img07.jpg” /></a>\ </li>’ ].join(""); $chatMsgList.append(msgTpl); // 清空聊天框并获取焦点（处理输入法和表情 - 聚焦） if (!$(".wdt__choose-panel").is(":hidden")) { $editor.html(""); } else { $editor.html("").focus(); } wchat_ToBottom();});// >>> 【工具栏选择功能模块】——————————————// …选择图片$("#J__choosePicture").on(“change”, function () { $(".wdt__choose-panel").hide(); var file = this.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var _img = this.result; var _tpl = [ ‘<li class=“me”>\ <div class=“content”>\ <p class=“author”>风铃子</p>\ <div class=“msg picture”><img class=“img__pic” src="’+ _img +’" /></div>\ </div>\ <a class=“avatar” href=“微钉-好友主页(详细资料).html”><img src=“img/uimg/u__chat-img07.jpg” /></a>\ </li>’ ].join(""); $chatMsgList.append(_tpl); setTimeout(function(){wchat_ToBottom();}, 17); }});// …选择文件$("#J__chooseFile").on(“change”, function () { $(".wdt__choose-panel").hide(); var file = this.files[0], fileSuffix = /.[^*]+/.exec(file.name).toString(), fileExt = fileSuffix.substr(fileSuffix.lastIndexOf(’.’) + 1, fileSuffix.length).toLowerCase(); console.log(fileSuffix); console.log(fileExt); var fileTypeArr = [‘jpg’, ‘jpeg’, ‘png’, ‘gif’, ’txt’, ‘rar’, ‘zip’, ‘pdf’, ‘docx’, ‘xls’]; if ($.inArray(fileExt, fileTypeArr) < 0) { wcPop({content: ‘附件只支持jpg、jpeg、png、gif、txt、rar、zip、pdf、docx、xls格式的文件’, time: 2}); return; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var _file = this.result; console.log(_file); var _tpl = [ ‘<li class= “me”>\ <div class=“content”>\ <p class=“author”>风铃子</p>\ <div class=“msg attachment”>\ <div class=“card flexbox flex-alignc”>\ <span class=“ico-bg wdt__bg01”><i class=“iconfont icon-fujian”></i></span>\ <div class=“file-info flex1” title="’+ file.name +’">\ <p class=“name”>’+ file.name +’</p><p class=“size”>’+ formateSize(file.size) +’</p>\ </div>\ <a class=“btn-down” href="’+ _file +’" target="_blank" download="’+ file.name +’"><i class=“iconfont icon-down”></i></a>\ </div>\ </div>\ </div>\ <a class=“avatar” href=“微钉-好友主页(详细资料).html”><img src=“img/uimg/u__chat-img07.jpg” /></a>\ </li>’ ].join(""); $chatMsgList.append(_tpl); setTimeout(function () {wchat_ToBottom();}, 17); } /** 格式化文件大小显示 value : file文件的大小值 */ formateSize = function (value) { if (null == value || value == ‘’) { return “0 Bytes”; } var unitArr = new Array(“B”, “KB”, “MB”, “GB”, “TB”, “PB”, “EB”, “ZB”, “YB”); var index = 0; var srcsize = parseFloat(value); index = Math.floor(Math.log(srcsize) / Math.log(1024)); var size = srcsize / Math.pow(1024, index); size = size.toFixed(2); //保留的小数位数 return size + unitArr[index]; }});