百度Ueditor多圖片上傳控件


發現百度的Ueditor富文本編輯器中的多圖片上傳控件很不錯,於是便想着分享出來使用,費了老勁,少不了無名朋友的幫助,也查了不少資料,終於搞定了

發代碼給大家,請大家多多指正

 

1.首先要在html頁面中添加對ueditor的腳本引用

<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../public/ueditor/editor_all_min.js" type="text/javascript"></script>
<script src="../public/ueditor/editor_config.js" type="text/javascript"></script>
<link href="../public/ueditor/themes/default/css/ueditor.css" rel="stylesheet" type="text/css" />

2.添加多圖片上傳控件的單獨調用,最原始的代碼是無名朋友寫的,缺少在線預覽。這是加上以后的代碼,盡量寫得完整一點。

復制代碼
<table id="table_edit" cellpadding="0" cellspacing="0">
<tr>
<td class="td_left">
文章主圖
</td>
<td>
<input type="button" id="btn_uploadimgs" onclick="upImage();" value="上傳圖片" style="width: 153px;
height: 30px;"
/>
         <script type="text/javascript"> var myEditorImage;
var d;
function upImage() {
d
= myEditorImage.getDialog("insertimage");
d.render();
d.open();
}
myEditorImage
= new UE.ui.Editor();
myEditorImage.render(
'myEditorImage');
myEditorImage.ready(
function () {
myEditorImage.setDisabled();
myEditorImage.hide();
myEditorImage.addListener(
'beforeInsertImage', function (t, arg) {
if (arg.length > 0) {
var tr = document.getElementById("tr_Article_Img");
$(
"#tr_Article_Img").show();
$(
"#img_Article_Img").attr("src", arg[0].src);
var imgsrc = arg[0].src;
var src = imgsrc.substr(imgsrc.indexOf("uploadfiles"), imgsrc.length);
$(
"#Article_Img").val(src);
}
});
});
</script>
</td>
</tr>
<tr id="tr_Article_Img" style="display: none;">
<td valign="top" class="td_left">
文章主圖
</td>
<td style="padding: 7px; padding-left: 15px;">
<img id="img_Article_Img" alt="" src="" />
<input id="Article_Img" name="Article_Img" type="hidden" />
</td>
</tr>
</table>
復制代碼

3.效果還不錯吧: )

  (1)點擊上傳圖片,彈出控件(我把網絡圖片上傳隱藏了,只剩下本地上傳)


  (2)點擊添加圖片可以從本地選擇多個圖片

  

  (3)點擊開始上傳,上傳到服務器,點擊確認,關閉控件,並把所以上傳的圖片顯示到頁面上。

  到此結束

  要注意的幾點:

  (1)現在是單個文件顯示,如果要顯示多個文件,需要循環"arg"參數,並顯示到頁面上,"arg"是回傳過來的img元素集合

  (2)對editor_config.js里的圖片上傳保存路徑的配置,把文件保存在自己想要的位置。

4.最后,謝謝那個幫助我的朋友

  http://wenku.baidu.com/view/88cbfee6aeaad1f346933f25?fr=prin


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: