多圖片上傳控件

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

發代碼給你們,請你們多多指正css

 

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

<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.添加多圖片上傳控件的單獨調用,最原始的代碼是無名朋友寫的,缺乏在線預覽。這是加上之後的代碼,儘可能寫得完整一點。java

<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.效果還不錯吧: )jquery

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

     

  (2)點擊添加圖片能夠從本地選擇多個圖片網絡

  

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

  到此結束ide

  要注意的幾點:ui

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

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

4.最後,謝謝那個幫助個人朋友

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

相關文章
相關標籤/搜索