Ueditor實現自定義conttoller請求或跨域請求

UEditor 是由百度「FEX前端研發團隊」開發的所見即所得富文本web編輯器,具備輕量,可定製,注重用戶體驗等特色,開源基於MIT協議,容許自由使用和修改代碼。咱們在作網站文字編輯的時候會常常用到它。可是ueditor默認支持保存圖片在網站的根目錄下面。可是,對於網站來講,咱們大多數的時候都要把靜態資源保存到另外的服務器上,與應用服務器分開,以增長網站的性能php

下面介紹一下這個方法:前端

一,java

ueditor 1.4.2+ 推薦使用惟一的請求地址,經過GET參數action指定不一樣請求類型。 但不少用戶都但願使用本身寫好的上傳地址,下面提供一種解決方法: 因爲全部ueditor請求都經過editor對象的getActionUrl方法獲取請求地址,能夠直接經過複寫這個方法實現,把這段js單獨寫到一個js中,加入的網頁,而且在放在引用uditor的js以後。例子以下:web

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return 'http://a.b.com/upload.php';
} else if (action == 'uploadvideo') {
return 'http://a.b.com/video.php';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
action類型以及說明
uploadimage://執行上傳圖片或截圖的action名稱
uploadscrawl://執行上傳塗鴉的action名稱
uploadvideo://執行上傳視頻的action名稱
uploadfile://controller裏,執行上傳視頻的action名稱
catchimage://執行抓取遠程圖片的action名稱
listimage://執行列出圖片的action名稱
listfile://執行列出文件的action名稱ajax

把上面的返回地址換成本身的controller地址或跨域地址就能夠了
二,定義返回值的格式
因爲ueditor是使用ajax的請求的,因此返回的格式是一個json串。格式以下:
{
"state": "SUCCESS",
"url": "upload/demo.jpg",
"title": "demo.jpg",
"original": "demo.jpg",
"type":".jpg",
"size" :"1024"
}
其中type是圖片的類型;size是圖片的大小,url就是圖片插入到ueditor中的圖片可訪問的地址
咱們還有另一種方式知道返回的格式,就是在ueditor默認的配置狀況下,看一下上傳圖片後成功的返回值格式就能夠了。在瀏覽器上按下f12,點network->response
三,圖片中文名返回亂碼的解決方案
當圖片的名字是中文的時候,返回的結果中中文倒是亂碼,好比:???;就算是配置了全部的編碼是utf8以後也不能夠。這是由於在顯示的時候ueditor是按unicode方式顯示的。這個時候咱們須要把返回結果的json串轉成unicode格式,以下:
(1) 接收圖片的controller:
[java] view plain copy
package com.gametech.controller; spring

import java.io.File;
import java.io.IOException;
import java.util.Iterator; json

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; 跨域

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;
import org.springframework.web.multipart.commons.CommonsMultipartResolver; 瀏覽器

import com.alibaba.fastjson.JSON;
import com.gametech.entity.ReturnUpLoadImage;
import com.gametech.utils.StringUtils; 服務器

@Controller
@RequestMapping("upload")
public class UploadController {
/**

  • @return
    */
    @RequestMapping("upImage")
    @ResponseBody
    public String upImage(HttpServletRequest request, HttpServletResponse response) {
    // 建立一個通用的多部分解析器
    CommonsMultipartResolver multipartResolver = new CommonsMultipartResolver(
    request.getSession().getServletContext());
    String[] filenames = null;
    // 判斷 request 是否有文件上傳,即多部分請求
    //{"state": "SUCCESS","title": "1437299650668072896.jpg","original": "rdn_508f4a9624572.jpg","type": ".jpg","url": "/ueditor/upload/image/20150719/1437299650668072896.jpg","size": "14262"}

    ReturnUpLoadImage upLoadImage = new ReturnUpLoadImage();  
    upLoadImage.setUrl("upload/1.jpg");  
    if (multipartResolver.isMultipart(request)) {  
        // 轉換成多部分request  
        //MultipartHttpServletRequest multiRequest = multipartResolver.resolveMultipart(request);

    [java] view plain copy
    <span style="white-space:pre"> </span>MultipartHttpServletRequest multiRequest = (MultipartHttpServletRequest) request;
    filenames = new String[multiRequest.getFileMap().size()];
    // 取得request中的全部文件名
    Iterator<String> iter = multiRequest.getFileNames();
    int i = 0;
    while (iter.hasNext()) {
    // 記錄上傳過程起始時的時間,用來計算上傳時間
    int pre = (int) System.currentTimeMillis();
    // 取得上傳文件
    MultipartFile file = multiRequest.getFile(iter.next());
    if (file != null) {
    // 取得當前上傳文件的文件名稱
    String myFileName = file.getOriginalFilename();
    upLoadImage.setOriginal(myFileName);
    // 若是名稱不爲「」,說明該文件存在,不然說明該文件不存在
    if (myFileName.trim() != "") {
    System.out.println(myFileName);
    // 重命名上傳後的文件名
    String fileName = "demoUpload" + file.getOriginalFilename();
    upLoadImage.setTitle(fileName);
    filenames[i] = fileName;
    i++;
    // 定義上傳路徑
    String path = "E:/" + fileName;
    File localFile = new File(path);
    try {
    file.transferTo(localFile);
    } catch (IllegalStateException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
    } catch (IOException e) {
    // TODO Auto-generated catch block
    e.printStackTrace();
    }
    }
    }
    // 記錄上傳該文件後的時間
    int finaltime = (int) System.currentTimeMillis();
    System.out.println(finaltime - pre);
    }

    }  
    upLoadImage.setType(".jpg");  
    upLoadImage.setSize("1024");  
    String result = JSON.toJSONString(upLoadImage);  
    result = StringUtils.chinaToUnicode(result);  
    return result;  
    //return "{\"state\": \"SUCCESS\",\"title\": \"1437300241099035569.jpg\",\"original\": \"QQ\u622a\u56fe20150327230133.jpg\",\"type\": \".jpg\",\"url\": \"/ueditor/upload/image/20150719/1437300241099035569.jpg\",\"size\": \"463908\"}";

    }
    }

(2) 中文轉unicode方法
[java] view plain copy
/**

  • 把中文轉成Unicode碼
  • @param str
  • @return
    */
    public static String chinaToUnicode(String str){
    String result="";
    for (int i = 0; i < str.length(); i++){
    int chr1 = (char) str.charAt(i);
    if(chr1>=19968&&chr1<=171941){//漢字範圍 \u4e00-\u9fa5 (中文)
    result+="\u" + Integer.toHexString(chr1);
    }else{
    result+=str.charAt(i);
    }
    }
    return result;
    }

轉載自 :http://blog.csdn.net/youxijishu/article/details/46958515

相關文章
相關標籤/搜索