js模仿微信后台管理的多图文界面，集成了ajax异步上传文件的插件，供大家参考，具体内容如下
效果图：
详细代码：
html:
<div> <div> <div> <!-- <p><span>2013-08-14</span></p>--> <div> <h4> 标题<span></span> </h4> <img src="https://www.jb51.net/assets/homer_admin-v1.5/images/2.png" /> <ul> <a href="javascript:void(0)"> <div> 编辑</div> </a> </ul> </div> </div> <div> <a href="#"> <span></span>增加一条 </a> </div> </div> <div> <div> <form method="POST" enctype="multipart/form-data" action=""> <label for="">标题</label> <input type="text" value="第0个" onchange="setTitle('div0')" /> <label for="">作者<em>（选填）</em></label> <input type="text" value="" /> <label for=""><span>大图片建议尺寸：720像素 * 400像素</span>封面</label> <div> <input type="file" /> <input type="button" value="上传" /> <img src="" /> <a href="#">删除</a> </div> <!-- <label for="">图文链接</label> <input type="text" value=""> --> <label for="">正文</label> <textarea></textarea> <div> <label for="">原文链接<em>（选填）</em></label> <input type="text" value="" /> <br /> </div> </form> </div> </div> <div> <div> <input type="button" value="保存" /> <input type="button" value="删除" /> </div> </div> </div>
javascript:
<script> var arr = [ 'div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7' ]; var arr2 = new Array(); var showDiv = "div0"; var option = { initialContent : '在编辑器中默认显示的内容',//初始化编辑器的内容 initialFrameHeight : 340 }; var editor = new UE.ui.Editor(option); editor.render("myEditor"); function removeImage(id) { $("#img" + id).hide(); $("#rm" + id).hide(); } function showCover(obj) { $(obj).addClass("sub-msg-opr-show"); } function removeCover(obj) { $(obj).removeClass("sub-msg-opr-show"); } function editDiv(obj) { if (showDiv != obj) { $("#" + showDiv).hide(); $("#" + obj).show(); showDiv = obj; } } function removeDiv(obj) { $("#s" + obj).remove(); $("#" + obj).remove(); $("#rich" + obj).remove(); arr.push(obj); arr2.splice($.inArray(obj, arr2), 1); if (arr2.length == 0) { showDiv = "div0"; $("#" + showDiv).show(); } else { if (obj == showDiv) { showDiv = arr2.pop(); arr2.push(showDiv); $("#" + showDiv).show(); } else { $("#" + showDiv).show(); showDiv = arr2.pop(); arr2.push(showDiv); } } } function setTitle(obj) { $("#title2" + obj).text($("#title" + obj).val()); } $("#add") .click( function() { var msgDiv; //var msgDiv2; if (arr.length == 7) { $("#" + showDiv).hide(); msgDiv = arr.pop(); arr2.push(msgDiv); showDiv = msgDiv; } else if (arr.length == 0) { alert('最多添加8个图文信息'); return; } else { msgDiv = arr.pop(); //msgDiv2=arr2.pop(); $("#" + showDiv).hide(); //arr2.push(msgDiv2); arr2.push(msgDiv); showDiv = msgDiv; } $(".previewBox") .append( "<div" + "><div> <div>标题</div> <div> " + "<img src='https://www.jb51.net/assets/homer_admin-v1.5/images/1.png'/> </div> </div> <ul> <li><div><a href='javascript:void(0)'> 编辑</a> " + "<a href='javascript:void(0)'" + "> 删除 </a></div> </li></ul> </div>"); $("#main") .append( " <div> " + "<form method='POST' enctype='multipart/form-data' action=''> <label for=''>标题</label>" + " <input type='text' onchange='setTitle(\"" + msgDiv + "\")'>" + "<label for=''>作者<em>（选填）</em></label> <input type='text' value='' />" + "<label for=''><spanid='upload-tip'>大图片建议尺寸：720像素 * 400像素</span>封面</label>" + "<div><input type='file'name='file"+msgDiv+"'/>" + "<input type='button' value='上传'/>" + " <img src=''/>" + "<a href='#'>删除</a></div>" + /* " <label for=''>图文链接</label>"+ "<input type='text' value=''>"+*/ "<label for=''>正文</label><textarea></textarea>" + "<div>" + "<label for=''>原文链接<em>（选填）</em></label> <input type='text' value='' />" + "<br/></div></form> </div>"); 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") { var result = window.confirm("确定发布这条图文？"); if (result) { window.location = "@PublishUrl"; } } } function removeTemplate() { if ("@ViewBag.Template.Row_ID") { var result = window.confirm("确定删除这条图文？"); if (result) { window.location = "@RemoveUrl"; } } } </script>
源码下载：微信多图文界面
本文已被整理到了《JavaScript微信开发技巧汇总》，欢迎大家学习阅读。