• <em id="52tge"><object id="52tge"><blockquote id="52tge"></blockquote></object></em>

  • <progress id="52tge"></progress>
      
      
      <tbody id="52tge"><pre id="52tge"></pre></tbody>
      <em id="52tge"></em>
      <li id="52tge"><acronym id="52tge"><u id="52tge"></u></acronym></li>

      <nav id="52tge"><sub id="52tge"><noframes id="52tge"></noframes></sub></nav>

      網站地圖 | RSS訂閱 老鐵博客 - 上海SEO優化|上海網站建設|蜘蛛池出租|站群代搭建
      你的位置:首頁 ? 網站建設 ? 正文

      KindEditor上傳圖片后回調傳入文本框和列表框并顯示圖片

      2016-5-6 10:14:17 | 作者:老鐵SEO | 1個評論 | 人瀏覽

      KindEditor編輯器本地上傳圖片文件后(單個圖片上傳和批量圖片上傳),將數據回調,以實現自由設置任何一張圖片做為文章形象圖且在指定區域展示此形象圖的功能。

      以下是KindEditor 4.1.11的示例代碼:

      <form id="frm" name="frm" action="" method="post">
      形象圖:<input id="pic" name="pic" type="text" />
      <select name="piclist" id="piclist" onChange="frm.pic.value=this.value; if(this.value.length>0){picshow.innerHTML='<img src=' + this.value + ' width=150 height=95 />';}else{picshow.innerHTML='<img src=images/nopic.gif width=150 height=95 />';}">
      	<option value="">不指定文章形象圖</option>
      </select>
      <div id="picshow"><img src="images/nopic.gif" width='150' height='95' /></div>
       
      <link rel="stylesheet" href="kindeditor/themes/default/default.css" />
      <script charset="utf-8" src="kindeditor/kindeditor-all.js"></script>
      <script charset="utf-8" src="kindeditor/lang/zh-CN.js"></script>
      <script>
      var KE;
      KindEditor.ready(function(K) {
      	KE = K.create('#Content',{
      		uploadJson : 'kindeditor/asp/upload_json.asp',
      		fileManagerJson : 'kindeditor/asp/file_manager_json.asp',
      		allowImageUpload: true, //多圖上傳
      		allowFileManager : true, //瀏覽圖片空間
      		filterMode : false, //HTML特殊代碼過濾
      		afterBlur: function(){ this.sync(); }, //編輯器失去焦點(blur)時執行的回調函數(將編輯器的HTML數據同步到textarea)
      		afterUpload : function(url, data, name) { //上傳文件后執行的回調函數,必須為3個參數
      			if(name=="image" || name=="multiimage"){ //單個和批量上傳圖片時
      				if(K("#pic").length>0){ //文本框存在
      					document.getElementById('piclist').options[document.getElementById('piclist').length]=new Option(url,url); //下拉列表框增加一條
      					document.getElementById('piclist').selectedIndex+=1; //選定剛新增的這一條
      					K("#indexpicimg").html("<img src='" + url + "' width='150' height='95' />"); //重置圖片展示區DIV的HTML內容
      					K("#pic").val(url); //重置文本框值
      				}
      			}
      		}
      	});
      });
      </script>
      <textarea id="Content" name="Content" style=" width: 99%; height: 500px; visibility: hidden; display: block; "></textarea>
      </form>


    1. 本文來自: 老鐵博客,轉載請保留出處!歡迎發表您的評論
    2. 相關標簽:KindEditor  編輯器  JS特效  文件操作  文件上傳  無組件上傳  
    3. 已有1位網友發表了一針見血的評論,你還等什么?

      必填

      選填

      記住我,下次回復時不用重新輸入個人信息

      必填,不填不讓過哦,嘻嘻。

      ◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

      色情激情片日本大全|亚洲无码色情gif|六人行成人版第九影院|亚洲成人电影理论电影

    4. <em id="52tge"><object id="52tge"><blockquote id="52tge"></blockquote></object></em>

    5. <progress id="52tge"></progress>
        
        
        <tbody id="52tge"><pre id="52tge"></pre></tbody>
        <em id="52tge"></em>
        <li id="52tge"><acronym id="52tge"><u id="52tge"></u></acronym></li>

        <nav id="52tge"><sub id="52tge"><noframes id="52tge"></noframes></sub></nav>