JS는 WeChat 백엔드 관리의 다중 그래픽 인터페이스를 모방하고 참조를 위해 파일의 비동기 업로드를 위해 AJAX 플러그인을 통합합니다. 특정 내용은 다음과 같습니다
생식 이미지 :
자세한 코드 :
HTML :
<div id = "랩"> <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/images/2.png"/> <ul style = "margin : 10px 10px; wide;"> ">"> ">." href = "javaScript : void (0)"onclick = "editdiv ( 'div0')"> <div> 편집 </div> </a> </ul> </div> </div> <div> <a href = "#"id = "add"> <div <div < "> main" "main" "main" "main" ""div id = "div" "id ="id = "id ="id = "div id =" "div id ="div "> 메소드 = "post"encType = "multipart/form-data"action = ""> <label for = "" "> title </label </label </label"= "text"name = "thit value = "id ="author " /> <label for =" "> <span id ="업로드 팁 "> 큰 이미지 권장 크기 : 720 픽셀* 400 픽셀 < /span> cover < /label> <div style ="vertical-align : bottom; margin-bottom : 10px; "> <input type ="file "file"id = "input type =" "input type ="input) onclick = "ajaxfileUpload ( 'div0')"/> <img src = "id ="id = "imgdiv0"/> <aid = "rmdiv0"href = "#"onclick = "remodImage ( 'div0')"style = "vertical-align : fottom;"</dive </div </div </div </div </div </div </div> type = "text"name = "message_url"value = ""id = "ud ="id = "ud">-> <label for = "" "> text </label> <textarea name ="content "id ="myEditor "> </textArea> <div id ="url-block "style ="argin-top : 14px; "> raint <em class = em class = 'mp_dec'> <입력 유형 = "text"name = "content_link"value = ""id = "surl"/> <br/> </div> </div> </div> </div> </div> <div style = "clear : padding-top : 20px;"> <div style = "clear : 텍스트 : 중심; 패딩-탑 : 20px-top : 1px solid #dddd; type = "button"onclick = 'publishtemplate ()'value = "save"/> <input type = "button"onclick = "removetemplate ()"value = "delete"/> </div> </div> </div>
자바 스크립트 :
<cript> var arr = [ 'div1', 'div2', 'div3', 'div4', 'div5', 'div6', 'div7']; var arr2 = 새로운 배열 (); var showdiv = "div0"; var 옵션 = {초기 콘텐츠 : '편집기에 기본적으로 표시되는 내용', // 편집기의 내용을 초기화하여 InitialFrameHeight : 340}; var editor = new ue.ui.editor (옵션); 편집자 ( "myeditor"); 함수 removeImage (id) {$ ( "#img" + id) .hide (); $ ( "#rm" + id) .hide (); } 함수 showcover (obj) {$ (obj) .addclass ( "sub-msg-ophow"); } 함수 removeCover (obj) {$ (obj) .removeClass ( "sub-msg-ophow"); } function editdiv (obj) {if (showdiv! = obj) {$ ( "#" + showdiv) .hide (); $ ( "#" + obj) .show (); showdiv = obj; }} 함수 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); }}} 함수 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; ; msgdiv + " 'Style ='Border-Top : 1px solid #c6c6c6; 높이 : 120px; style = 'float;'> " +"<img src = '../assets/homer_admin-v1.5/images/1.png'style = 'width : 80px; 높이 : 80px;'// images/1.png 'style ='width : 80px; <li> <div style = 'width : 150px; " +"높이 : font-size;'> < 'line-height; style = 'line-height;'href = 'javaScript : void (0)' " +"removediv (/"" + msgdiv + "/"); return false; '> delete </a> </li> </li> </li> </li> </ul> </div> "). id = ' + msgdiv + "' '>" + "<form 메소드 ='post 'encType ='multipart/form-data 'action =' '> <label class ='block 'for =' '> title </label>" + "<입력 유형 ='텍스트 '이름 ='id = 'title" + msgdiv + "'onstitle = 'onchange =' + msgdiv +" + " + Msgdiv +") class = 'msg-input'> " +"<label class = 'block'for = ''> author <em class = 'mp_desc'> (선택 사항) </em> </label> <input type = 'author'value = 'value =' 'id ='author 'class ='msg-input '/> "<label class ='block 'for ='upload '> 제안 된 크기 : 720 픽셀* 400 픽셀 </span> cover </label> " +"<div class = 'cover-area'style = 'vertical-align : bottom; margin-bottom : 10px;'> <입력 유형 = 'file'name ='file " + msgdiv +"// " +"<입력 유형 = 'value' 'value' 'value' onclick = 'ajaxfileUpload (/"" + msgdiv + "/")'/") '/>" + "<img src =' 'id ='img" + msgdiv + " 'style ='width : 100px; 수직-알리글 : 바닥; 테두리 : 1px solid grey '/>" + "<aid ='rm" + msgdiv + " 'href =#################################################################' onclick = 'removeImage (/"" + msgdiv + "/")'style = 'vertical-align : allight;'> delete </a> </a> " +/*"<label class = 'block'for = ''> 그림 link </label> " +"<input type = 'text'aling_url 'value ='id = 'url'class 'url'msg-input ' 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 = ''> in emplesc '> <입력 유형 = 'text'name = 'content_link'value = ''id = 'surl'class = 'msg-input'/> " +"<br/ "<br/"<br/ "<br/</div> </form> </div>"); editor.render ( "rich" + msgdiv);}); 함수 ajaxfileUpload (id) {var filename = $ ( "#file" + id) .val (); var 접미사; if (filename! = "") {wiftix = filename.substr (filename.indexof ( ".") + 1, filename.length); } if (filename == "") {alert ( "업로드 할 사진을 선택하십시오"); } else if (wiffix! = "jpg"&& 접미사! = "png") {alert ( "파일 형식이 있습니다"); } else {$ .AjaxFileUpload ({url : 'fileUpload', // 서버 측 요청 주소 유형 : 'post', 'post', 'file' + id, // 파일 업로드 도메인 데이터 유형 : 'json', // return 값 유형은 일반적으로 JSON 성공으로 설정되어 있습니다 (데이터, 상태) 함수 {alert (alert (”) 상태, e) // 서버 응답 처리 함수 {alert (e)})} 함수 publishtemplate () {if ( "@viewbag.template.row_id") {var result = window.confirm ( "이 그래픽 또는 텍스트를 게시하도록 확인"); if (result) {window.location = "@publishurl"; }}} 함수 removetemplate () {if ( "@viewbag.template.row_id") {var result = window.confirm ( "이 그래픽을 삭제 하시겠습니까?"); if (result) {window.location = "@removeUrl"; }}}}} </script>소스 코드 다운로드 : wechat 다중 그래픽 인터페이스
이 기사는 "JavaScript WeChat Development Skills의 요약"으로 편집되었으며 모두가 배우고 읽을 수 있습니다.
우려되는 Wechat Mini 프로그램에 대한 자습서를 추천하고 싶습니다. "Wechat Mini 프로그램 개발 자습서"는 Everybody의 편집자가 신중하게 편집했습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.