4. UEditor 實現(xiàn) 自定義上傳

這里以上傳圖片為例

  1. 先決條件

  2. 修改前臺上傳圖片訪問路徑

    1. 官方說明:
  3. 新建 diyindex.html

    • diyindex.html 代碼
        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <title>使用自己定義的上傳類</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
        <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="ueditor.all.min.js"> </script>
        <!--建議手動加在語言,避免在ie下有時因為加載語言失敗導(dǎo)致編輯器加載失敗-->
        <!--這里加載的語言文件會覆蓋你在配置項目里添加的語言類型顿苇,比如你在配置項目里配置的是英文,這里加載的中文硅确,那最后就是中文-->
        <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>
    
        <style type="text/css">
            div{
                width:100%;
            }
        </style>
    </head>
    <body>
    <div>
        <h1>使用自己定義的上傳類</h1>
        <textarea id="editor" type="text/plain" style="width:1024px;height:500px;"></textarea>
    </div>
    
    <script type="text/javascript">
        UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
        UE.Editor.prototype.getActionUrl = function(action) {
            if (action == 'uploadimage' ) {
                return 'http://localhost:8080/_ueditor/UploadImageServlet';
            } else {
                return this._bkGetActionUrl.call(this, action);
            }
        }
        
        var ue = UE.getEditor('editor');
    </script>
    </body>
    </html>
    
    • 注意:
  4. 新建 UploadImageServlet 接受前段上傳請求榜苫、保存圖片、返回信息打掘。

    1. web.xml 中

    2. UploadImageServlet 代碼

      1. 屬性


      2. doPost 方法代碼

            protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                        System.out.println("------- ueditor 圖片上傳  -------");
                         
                        FileItemStream fileStream = null;
                        boolean isAjaxUpload = request.getHeader( "X_Requested_With" ) != null;
                        
                        if (!ServletFileUpload.isMultipartContent(request)) {
                            sendData( response, false, AppInfo.NOT_MULTIPART_CONTENT , null);
                            return ;
                        }
                        
                        ServletFileUpload upload = new ServletFileUpload(
                                new DiskFileItemFactory());
                        
                        if ( isAjaxUpload ) {
                            upload.setHeaderEncoding( "UTF-8" );
                        }
                        
                        try {
                            FileItemIterator iterator = upload.getItemIterator(request);
                
                            while (iterator.hasNext()) {
                                fileStream = iterator.next();
                
                                if (!fileStream.isFormField())
                                    break;
                                fileStream = null;
                            }
                            
                            if (fileStream == null) {
                                sendData( response, false, AppInfo.NOTFOUND_UPLOAD_DATA , null);
                                return ;
                            }
                            
                            // 得到 得到 新路徑格式+名稱格式
                            String savePath = this.savePath;
                            // 得到 原文件名          
                            String originFileName = fileStream.getName();
                            // 得到 原文件名后綴
                            String suffix = FileType.getSuffixByFilename(originFileName);
                            
                            // 將 originFileName 去掉原文件名后綴   
                            originFileName = originFileName.substring(0,
                                    originFileName.length() - suffix.length());
                            // 得到 新路徑格式+名稱格式+后綴    
                            savePath = savePath + suffix;
                
                            // 得到  文件上傳大小限制华畏,單位B
                            int maxSize = this.maxSize;
                
                            // 得到允許上傳的圖片格式數(shù)組
                            String[] allowTypes = this.allowTypes;
                            if (!validType(suffix, allowTypes) ) {
                                sendData( response, false, AppInfo.NOT_ALLOW_FILE_TYPE , null);
                                return ;
                            }
                            
                            // 根據(jù) 新路徑格式+名稱格式+后綴 以及 原文件名 產(chǎn)生新的保存路徑和名稱
                            savePath = PathFormat.parse(savePath, originFileName);
                            
                            // 得到 保存至圖片服務(wù)器的 圖片訪問路徑前綴
                            String rootPath = request.getSession().getServletContext().getRealPath( "/" );
                            rootPath = rootPath.substring( 0 , rootPath.length() );
                            String physicalPath =  rootPath + savePath;
                
                            // 將上傳圖片保存至 硬盤
                            InputStream is = fileStream.openStream();
                            State storageState = StorageManager.saveFileByInputStream(is, physicalPath , maxSize);
                            is.close();
                            
                            if (storageState.isSuccess()) {
                                storageState.putInfo("url", PathFormat.format(savePath));
                                storageState.putInfo("type", suffix);
                                storageState.putInfo("original", originFileName + suffix);
                            }
                            
                            sendData( response, true, 0 , storageState);
                            return ;
                            
                        } catch (FileUploadException e) {
                            sendData( response, false, AppInfo.PARSE_REQUEST_ERROR , null);
                            return ;
                        } catch (IOException e) {
                        }
                        sendData( response, false, AppInfo.IO_ERROR , null);
                        return ;
                    }
        
      3. 其他方法


  5. 注意

    UploadImageServlet 中的

     // 圖片服務(wù)器保存路徑前綴
     private String rootPath = "";
    

    與 config.json 中的

    需要按需配置!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末尊蚁,一起剝皮案震驚了整個濱河市亡笑,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌横朋,老刑警劉巖仑乌,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異琴锭,居然都是意外死亡晰甚,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進店門决帖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來压汪,“玉大人,你說我怎么就攤上這事古瓤。” “怎么了腺阳?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵落君,是天一觀的道長。 經(jīng)常有香客問我亭引,道長绎速,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任焙蚓,我火速辦了婚禮纹冤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘购公。我一直安慰自己萌京,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布宏浩。 她就那樣靜靜地躺著知残,像睡著了一般。 火紅的嫁衣襯著肌膚如雪比庄。 梳的紋絲不亂的頭發(fā)上求妹,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天,我揣著相機與錄音佳窑,去河邊找鬼制恍。 笑死,一個胖子當(dāng)著我的面吹牛神凑,可吹牛的內(nèi)容都是我干的净神。 我是一名探鬼主播,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼强挫!你這毒婦竟也來了岔霸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤俯渤,失蹤者是張志新(化名)和其女友劉穎呆细,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體八匠,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡絮爷,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了梨树。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片坑夯。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖抡四,靈堂內(nèi)的尸體忽然破棺而出柜蜈,到底是詐尸還是另有隱情,我是刑警寧澤指巡,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布淑履,位于F島的核電站,受9級特大地震影響藻雪,放射性物質(zhì)發(fā)生泄漏秘噪。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一勉耀、第九天 我趴在偏房一處隱蔽的房頂上張望指煎。 院中可真熱鬧,春花似錦便斥、人聲如沸至壤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽崇渗。三九已至,卻和暖如春京郑,著一層夾襖步出監(jiān)牢的瞬間宅广,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工些举, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留跟狱,地道東北人。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓户魏,卻偏偏與公主長得像驶臊,于是被迫代替她去往敵國和親挪挤。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內(nèi)容