JSは、WeChat BackEnd Managementのマルチグラフィックインターフェイスを模倣し、参照用の非同期ファイルのアップロード用にAjaxプラグインを統合します。特定のコンテンツは次のとおりです
複製画像：
詳細なコード：
HTML：
<div id = "wrap"> <div id = "sidebar"> <div> <！ - <p style = "マージン：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/emages/2.png"/> <ul style = "マージン：10px 10px; width：320px; href = "javascript：void（0）" onclick = "editdiv（ 'div0'）"> <div> edit </div> </a> </ul> </div> </div> <div> <a href = "＃" id = "add"> <span>追加</a>追加method = "post" enctype = "multipart/form-data" action = "" "> <label for =" "> title </label> <入力タイプ=" text "name =" value "value =" tittlediv0 "onchange =" setitle（ 'div0'） "/> <label for =" " value = "" id = "Author" /> <label for = "" "> <span id =" upload-tip ">大きな画像推奨サイズ：720ピクセル* 400ピクセル< /span>カバー< /label> <div style =" vertical-align：bortical-align：bortial-align：bortom：10px; "> <inputタイプ="ファイル "nam onclick = "ajaxfileupload（ 'div0'）"/> <img src = "" id = "imgdiv0"/> <a id = "rmdiv0" href = "＃" onclick = "remoimage（ 'div0'）" style = " type = "text" name = "message_url" value = "" id = "url"> - > <label for = ""> text </label> <textarea name = "content" = "myeditor"> </textarea> <div div = "url-block" stiled = "margin-top：14px;"> <label） " <入力タイプ= "text" name = "content_link" value = "" id = "surl"/> <br/> </div> </form> </div> </div> <div style = "clear：blod; padding-top：20px;"> <div style = "clear：clear：blote; text-align：center; padtop：border solid tppx; 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： 'エディターにデフォルトで表示されるコンテンツ'、//エディターのコンテンツを初期化InitialFrameHeight：340}; var editor = new ue.ui.editor（option）; editor.render（ "myeditor"）;関数removeImage（id）{$（ "＃img" + id）.hide（）; $（ "＃rm" + id）.hide（）; } function showcover（obj）{$（obj）.addclass（ "sub-msg-opr-show"）; }関数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（）; arr2.push（msgdiv）; showdiv;グラフィック情報）; id = 's " + msgdiv +"' style = 'border-top：1px solid＃c6c6c6; height：120px;' removecover（ '" +" onmouseover =' showcover（this）; id = 'title2 "+msgdiv+"'> title </div> <div style = 'float：right;'> "+" <img src = '../assets/homer_admin-v1.5/images/1.png' style = 'width：80px; height：80px;' //画像/1.png 'width：' width：<px; class = 'abs tc sub-msg-opr' style = 'margin-left：0;'> <li> <div style = 'width; " +" height：16px; <a style =' line-height：100px; ' "/"）; return false; '>編集</a> "<a style =' line-height： 'href =' javascript：void（0） '" + "onclick =' remavediv（/" " + msgdiv +"/"）; <div class = 'msg-editer' id = '" + msgdiv +"'> " +" <form method = 'post' enctype = 'multipart/form-data' action = ''> <label class = 'block' for = '' "/"） 'class =' msg-input '> " +" <label class =' block 'for =' '>著者<em class =' mp_desc '>（optional）</em> </label> <input type =' text 'name ='著者 'value =' id = 'class =' class = 'msg-input'/> r'id = 'upload-tip'>大きな画像提案サイズ：720ピクセル* 400ピクセル</span> cover> cover </label> " +" <div class = 'cover-area' style = 'vertical-align：bortical-align：10px;'> <input type = 'file'name =' file " +" onclick = 'ajaxfileupload（/"" + msgdiv + "/"）'/> " +" <img src = '' id = 'img " + msgdiv +"' style = 'width：' width：100px; onClick = 'RemoveImage（/"" + msgdiv + "/"）' style = 'vertical-align：bortical-align：bortial-align;'> delete </a> </div> " +/*" <ラベルクラス= 'ブロック' for = ''> picture link </label> class = 'block' for = ''> text </label> <textarea name = 'content' id = 'rich " + msgdiv +"'> </textarea> " +" <div class = 'none' id = 'url-block' style = 'マージントップ：14px;'> " +" <ラベルクラス= 'for =' <入力型= '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サフィックス; if（filename！= ""）{suffix = filename.substr（filename.indexof（ "。"） + 1、filename.length）; } if（filename == ""）{alert（ "アップロードする画像を選択してください"）; } else if（suffix！= "jpg" && suffix！= "png"）{alert（ "ファイル形式"）; } else {$ .ajaxfileupload（{url： 'fileupload'、//サーバー側の要求アドレスタイプ： 'post'、fileElementId： 'file' + id、// file upload domain datatype： 'json'、//戻り値タイプは一般的にJSONに設定されています。 function（data、status、e）//サーバーの応答障害処理関数{alert（e）; if（result）{window.location = "@publishurl"; }}} function removetemplate（）{if（ "@viewbag.template.row_id"）{var result = window.confirm（ "このグラフィックを削除することを確認しますか？"）; if（result）{window.location = "@removeurl"; }}}} </script>ソースコードのダウンロード：WeChatマルチグラフィックインターフェイス
この記事は「JavaScript Wechat Development Skillsの要約」にまとめられており、誰もが学習して読むことを歓迎します。
「WeChat Mini Program Development Tutorial」が皆の編集者によって慎重に編集されているWechat Miniプログラムに関するチュートリアルをお勧めします。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。