百度Ueditor多圖片上傳控件

本文转载自 moqiang02 查看原文 2014-05-09 5498 控件/控件/ 图片/图片/ 百度/百度/ ueditor/ueditor/ JS+JQuery/JS+JQuery/ 图片上传/图片上传/ 上传上传

發現百度的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

注意！

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

百度Ueditor多圖片上傳控件百度BAE使用ueditor 上傳圖片百度Ueditor改變圖片上傳路徑 ueditor 百度編輯器配置如何上傳圖片百度ueditor 上傳圖片后如何設置樣式百度ueditor富文本--配置圖片上傳百度UEditor上傳圖片-再總結一次對百度的UEditor多圖片上傳的一些補充百度編輯器Ueditor配置上傳圖片百度UEditor的介紹和圖片上傳的使用（java）