JS imitates the multi-graphic interface of WeChat backend management, and integrates ajax plug-in for asynchronous upload of files for your reference. The specific content is as follows
Reproduction image:
Detailed code:
html:
<div id="wrap"> <div id="sidebar"> <div> <!-- <p style="margin:10px 14px 0 14px;"><span>2013-08-14</span></p>--> <div onmouseout="removeCover(this);" onmouseover="showCover(this);"> <h4 id="title2div0"> Title<span></span> </h4> <img src="../assets/homer_admin-v1.5/images/2.png" /> <ul style="margin: 10px 10px; height: 150px; width: 320px;"> <a href="javascript:void(0)" onclick="editDiv('div0')"> <div> Edit</div> </a> </ul> </div> </div> <div> <a href="#" id="add"> <span > Add one</a> </div> </div> </div> <div id="main"> <div id="div0"> <form method="POST" enctype="multipart/form-data" action=""> <label for="">Title</label> <input type="text" name="Title" value="0th" id="titlediv0" onchange="setTitle('div0')" /> <label for="">Author<em>(optional)</em></label> <input type="text" name="Author" value="" id="author" /> <label for=""><span id="upload-tip">Large image recommended size: 720 pixels* 400 pixels</span> Cover</label> <div style="vertical-align: bottom; margin-bottom: 10px;"> <input type="file" name="file" id="filediv0" /> <input type="button" value="Upload" onclick="ajaxFileUpload('div0')" /> <img src="" id="imgdiv0" /> <a id="rmdiv0" href="#" onclick="removeImage('div0')" style="vertical-align: bottom;">Delete</a> </div> <!-- <label for="">Picture link</label> <input type="text" name="Message_URL" value="" id="url">--> <label for="">Text</label> <textarea name="Content" id="myEditor"></textarea> <div id="url-block" style="margin-top: 14px;"> <label for="">Original link<em class='mp_desc'> (optional)</em></label> <input type="text" name="Content_Link" value="" id="surl" /> <br /> </div> </form> </div> </div> <div style="clear: both; padding-top: 20px;"> <div style="clear: both; text-align: center; padding-top: 20px; border-top: 1px solid #dddddd;"> <input type="button" onclick='publishTemplate()' value="Save" /> <input type="button" onclick="removeTemplate()" value="Delete" /> </div> </div></div>javascript:
<script> var arr = [ 'div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7' ]; var arr2 = new Array(); var showDiv = "div0"; var option = { initialContent : 'The content displayed by default in the editor',//Initialize the content of the editor 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('Add up to 8 graphic information'); return; } else { msgDiv = arr.pop(); //msgDiv2=arr2.pop(); $("#" + showDiv).hide(); //arr2.push(msgDiv2); arr2.push(msgDiv); showDiv = msgDiv; } $(".previewBox") .append( "<div class='cover' id='s" + msgDiv + "' style='border-top:1px solid #C6C6C6;height: 120px;' onmouseout='removeCover(this);'" + " onmouseover='showCover(this);'><div> <div style='float:left;width: 250px; word-break:break-all;' id='title2"+msgDiv+"'>Title</div> <div style='float:right;'> " + "<img src='../assets/homer_admin-v1.5/images/1.png' style='width: 80px;height: 80px;'//images/1.png' style='width: 80px;height: 80px;'//div> <ul class='abs tc sub-msg-opr' style='margin-left: 0;'> <li><div style='width: 150px;"+ " height: 120px; font-size: 16px;'><a style='line-height:100px;' href='javascript:void(0)' onclick='editDiv(/"" + msgDiv + "/");return false;'> Edit</a> " + "<a style='line-height:100px;' href='javascript:void(0)'" + " onclick='removeDiv(/"" + msgDiv + "/");return false;'> Delete</a></div> </li></ul> </div>"); $("#main") .append( " <div class='msg-editer' id='"+msgDiv+"'> " + "<form method='POST' enctype='multipart/form-data' action=''> <label class='block' for=''>Title</label>" + " <input type='text' name='Title' id='title" + msgDiv + "' onchange='setTitle(/"" + msgDiv + "/")' class='msg-input'>" + "<label class='block' for=''>Author<em class='mp_desc'> (optional)</em></label> <input type='text' name='Author' value='' id='author' class='msg-input' />" + "<label class='block' for=''><span class='upload-tip r'id='upload-tip'>Large picture suggested size: 720 pixels* 400 pixels</span>Cover</label>" + "<div class='cover-area' style='vertical-align: bottom;margin-bottom: 10px;'><input type='file'name='file"+msgDiv+"'//>" + "<input type='button' value='upload' onclick='ajaxFileUpload(/"" + msgDiv + "/")'/>" + " <img src='' id='img"+msgDiv+"' style='width: 100px;vertical-align: bottom;border: 1px solid gray'/>" + "<a id='rm" + msgDiv + "' href='#' onclick='removeImage(/"" + msgDiv + "/")' style='vertical-align: bottom;'>Delete</a></div>" + /* " <label class='block' for=''>Picture link</label>"+ "<input type='text' name='Message_URL' value='' id='url' class='msg-input'>"+*/ "<label class='block' for=''>Text</label><textarea name='Content' id='rich"+msgDiv+"'></textarea>" + "<div class='none' id='url-block' style='margin-top: 14px;'>" + "<label class='block' for=''>Original link<em class='mp_desc'> (optional)</em></label> <input type='text' name='Content_Link' value='' id='surl' class='msg-input' />" + "<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("Please select the picture to upload"); } else if (suffix != "jpg" && suffix != "png") { alert("There is any file format"); } else { $.ajaxFileUpload({ url : 'fileUpload', //The server-side request address type: 'post', fileElementId : 'file' + id, //ID of file upload domain dataType : 'json', //Return value type is generally set to json success : function(data, status) //Server successful response processing function { alert("Success"); }, error : function(data, status, e)//Server response failure processing function { alert(e); } }) } } function publishTemplate() { if ("@ViewBag.Template.Row_ID") { var result = window.confirm("Confirm to publish this graphic or text?"); if (result) { window.location = "@PublishUrl"; } } } function removeTemplate() { if ("@ViewBag.Template.Row_ID") { var result = window.confirm("Confirm to delete this graphic?"); if (result) { window.location = "@RemoveUrl"; } } } }</script>Source code download: WeChat multi-graphic interface
This article has been compiled into "Summary of JavaScript WeChat Development Skills", and everyone is welcome to learn and read.
I would like to recommend a tutorial on WeChat mini program that is highly concerned: "WeChat Mini Program Development Tutorial" has been carefully compiled by the editor of everyone, I hope you like it.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.