JavaScript结合Bootstrap仿微信后台多图文界面管理
js模仿微信后台管理的多图文界面,集成了ajax异步上传文件的插件,供大家参考,具体内容如下 效果图:详细代码:html: -->
<div class="cover" onmouSEOut="removeCover(this);" ![]() <div class="msg-editer" id="div0">
<form method="POST" enctype="multipart/form-data" action=""> <label class="block" for="">标题 <input type="text" name="Title" value="第0个" id="titlediv0" onchange="setTitle('div0')" class="msg-input" /> <label class="block" for="">作者<em class="mp_desc">(选填) <input type="text" name="Author" value="" id="author" class="msg-input" /> <label class="block" for=""><span class="upload-tip r" id="upload-tip">大图片建议尺寸:720像素 * 400像素封面 <div class="cover-area" ![]() <div style="clear: both; padding-top: 20px;"> javascript:
var arr = [ 'div1','div2','div3','div4','div5','div6','div7' ];
var arr2 = new Array();
var showDiv = "div0";
var option = {
initialContent : '在编辑器中默认显示的内容',//初始化编辑器的内容
");initialFrameHeight : 340 function removeImage(id) { function showCover(obj) { function editDiv(obj) { function removeDiv(obj) { function setTitle(obj) { $("#add")
$("#main") .append( " "
");"
"![]() / " "+ "
editor.render("rich" + msgDiv); }); function ajaxFileUpload(id) { var filename = $("#file" + id).val(); var suffix; if (filename != "") { suffix = filename.substr(filename.indexOf(".") + 1,filename.length); } if (filename == "") { alert("请选择要上传的图片"); } else if (suffix != "jpg" && suffix != "png") { alert("文件格式有无"); } else { $.ajaxFileUpload({ url : 'fileUpload',//用于文件上传的服务器端请求地址 type: 'post',fileElementId : 'file' + id,//文件上传域的ID dataType : 'json',//返回值类型 一般设置为json success : function(data,status) //服务器成功响应处理函数 { alert("成功"); },error : function(data,status,e)//服务器响应失败处理函数 { alert(e); } }) } } function publishTemplate() { if ("@ViewBag.Template.Row_ID") { 源码下载: 本文已被整理到了《》,欢迎大家学习阅读。 为大家推荐现在关注度比较高的微信小程序教程一篇:小编为大家精心整理的,希望喜欢。 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |