ueditor自定義上傳
Ⅰ ueditor自定義實現文件上傳
1、ueditor.config.js文件配置伺服器地址：
2、當使用富文本上傳文件時，會通過 http://localhost/upload?action=config 取獲取配置信息
3、配置信息和上傳文件介面地址一樣，只是通過action參數來識別：
Ⅱ ueditor 怎麼自定義上傳文件的路徑啊求指導，，最好是有源碼
UEditor是由網路WEB前端研發部開發的所見即所得的開源富文本編輯器，具有輕量、可定製、用戶體驗優秀等特點。
開源基於BSD協議，所有源代碼在協議允許范圍內可自由修改和使用。
網路UEditor的推出，可以幫助不少網站開發者在開發富文本編輯器所遇到的難題，節約開發者因開發富文本編輯器所需要的大量時間，有效降低了企業的開發成本。
優點
1、體積小巧，性能優良，使用簡單
2、分層架構，方便定製與擴展
3、滿足不同層次用戶需求，更加適合團隊開發
4、豐富完善的中文文檔
5、多個瀏覽器支持：Mozilla, MSIE, FireFox, Maxthon,Safari 和Chrome
6、更好的使用體驗
7、擁有專業QA團隊持續支持，已應用在網路各大產品線上
使用步驟
1.添加jar包 jar包位置：文件根目錄下jsp的lib文件夾下，把jar包復制到web-inf下的lib文件夾下buildpath
2.修改config.js中的URL路徑，修改為UEidtor插件在自己工程中的正確根路徑
3.在jsp文件中先引入配置文件config.js然後再源碼文件all.js（注意順序）
4.載入容器和實例化容器
1.修改config.js配置文件URL為插件根目錄，一般是絕對路徑。
2.修改config.json中上傳圖片配置項中的訪問路徑前綴為項目名稱，根據情況修改上傳文件路徑和訪問路徑。
配置正確之後UEditor有上傳功能幫助我們上傳圖片。
但是上傳路徑會在項目部署的臨時文件夾下。 tomcat取消部署後，上傳文件就會和項目部署文件一起被刪除
3.實現把圖片上傳到自定義路徑
在處理上傳後的文件名稱的時候注意不要出現中文
要不然還需要做處理才能正確讀取文件！
4.（1）首先在jsp中覆蓋UEidtor獲取路徑的方法
//覆蓋UEditor中獲取路徑的方法
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
//判斷路徑 這里是config.json 中設置執行上傳的action名稱
if (action == 'uploadimage') {
return 'http://localhost:8080/maven-web/uploadImage.do';
} else if (action == 'uploadvideo') {
return '';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
（2）首先在springmvc配置文件中配置
<!-- 上傳配置 -->
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
<property name="defaultEncoding" value="UTF-8"></property>
</bean>
在controller中定義上傳和讀取文件的方法
/**
* SpringMVC 用的是 的MultipartFile來進行文件上傳
* 這里用@RequestParam()來指定上傳文件為MultipartFile
* @throws IOException
*/
@RequestMapping("uploadImage")
@ResponseBody//這里upfile是config.json中圖片提交的表單名稱
public Map<String,String> uploadImage(@RequestParam("upfile") CommonsMultipartFile upfile,HttpServletRequest request) throws IOException{
//文件原名稱
String fileName=upfile.getOriginalFilename();
//為了避免重復簡單處理
String nowName=new Date().getTime()+"_" + fileName;
if(!upimage.isEmpty()){
//上傳位置路徑
String path0 = "D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+nowName;
//按照路徑新建文件
File newFile = new File(path0);
//復制
FileCopyUtils.(upimage.getBytes(), newFile);
}
//返回結果信息(UEditor需要)
Map<String,String> map = new HashMap<String,String >();
//是否上傳成功
map.put("state", "SUCCESS");
//現在文件名稱
map.put("title", nowName);
//文件原名稱
map.put("original", fileName);
//文件類型 .+後綴名
map.put("type", fileName.substring(upfile.getOriginalFilename().lastIndexOf(".")));
//文件路徑
map.put("url", "/"+nowName+"/getImage.do");
//文件大小（位元組數）
map.put("size", upfile.getSize()+"");
return map;
}
/**
* 讀取文件
*/
@RequestMapping("{imgName}/getImage")
public void readImg(@PathVariable("imgName") String imgName, HttpServletResponse response)
throws Exception {
//設置文件的返回類型
response.setContentType("image/*");
//文件路徑(windows下是\\，linux下是//，都必須是絕對路徑)
String imgPath="D:\\eclipseworkspace\\maven-web\\src\\main\\webapp\\upload\\"+imgName;
//java中用File類來表示一個文件
File image = new File(imgPath);
//測試這個文件路徑是否存在（也就是這個文件是否存在）
if (!image.exists()) {
return;
}
//FileUtils.readFileToByteArray(File file)把一個文件轉換成位元組數組返回
response.getOutputStream().write(FileUtils.readFileToByteArray(image));
//java在使用流時,都會有一個緩沖區,按一種它認為比較高效的方法來發數據:
//把要發的數據先放到緩沖區,緩沖區放滿以後再一次性發過去,而不是分開一次一次地發.
//而flush()表示強制將緩沖區中的數據發送出去,不必等到緩沖區滿.
response.getOutputStream().flush();
response.getOutputStream().close();
}
Ⅲ 請問：百度Ueditor編輯器為什麼不能上傳圖片啊在ASP中，請求高手指教。
Ueditor編輯器圖片上傳
UEditor的圖片上傳採用了Flash上傳的方式，在功能上支持批量、本地預覽和實時進度提示，在界面上支持自定義背景、上傳按鈕和預覽框等視覺元素的樣式屬性，基本能夠滿足各種用戶的不同上傳需求。
由於涉及到了後端開發語言、flash、js和html等各種不同的web元素，圖片上傳這塊的配置和使用相對來說稍顯復雜，不過只要你認真看完以下的內容，那一切都不是什麼問題了。下面我們仍然以上文中的完整版實例來一步一步完成這個過程。
先來回顧一下完整版部署章節中提到的項目目錄結構，如下左圖所示。為了更加符合一般網站的具體實際，也為了更清晰地展示整體的路徑配置流程，我們先對這個目錄做一下小的改動：將ueditor目錄下的server文件夾提取出來放置到根目錄中的admin文件夾下。調整後的目錄結構如下右圖所示
首先來看前端部分的文件及其配置。打開dialogs/image文件夾，我們可以發現四個文件：
• callback.js：本上傳模塊支持的所有回調函數，你可以按需選用其中的內容。對於不需要做二次開發的你說，可以放心地直接刪除。
• image.html：圖片上傳對話框的主體文件。前端的配置和修改基本在此處完成。
• imageUploader.swf：Flash上傳文件。
• tangram.js：網路前端框架tangram封裝的flash操作模塊。一般無需修改。
打開image.html文件，找到.swf.create()方法，有關圖片上傳的大部分配置都在這里進行。這其中的絕大部分參數相信你對著注釋都能很容易明白意思，下面將挑選幾個需要稍微解釋的參數進行講解：
首先是backgroundUrl、listBackgroundUrl和buttonUrl這三個參數。UEditor為了讓上傳flash的界面能夠滿足各種不同的網站風格，預留出了這三個參數讓你可以自己定義上傳框的背景、圖片預覽框的背景和上傳按鈕的背景，默認留空情況下就是同學們看到的樣式。
其次是compressSide和compressLength這兩個參數。前者規定了上傳圖片等比壓縮的基準邊，後者規定了前者定義的基準邊的最大邊長，並以該值為基準進行等比縮放。此處的值設置是通過讀取配置文件中的maxImageSideLength值來進行，嫌麻煩的可以直接設置數值即可。
第三個是url參數。這個參數設置了圖片上傳後台處理程序的路徑。以當前項目示例來說，此處的url值應該是「../../../admin/server/upload/up.php」。
第四個要介紹的參數是ext。這個參數允許讓你自己定義需要向後端post的參數。只要書寫符合我們demo中的格式，後台就可以直接像接收一個普通的表單項一樣的方式來接收對應的自定義值。
最後一個需要要介紹的參數是fileType。它在前端限定了文件選擇框中能夠顯示的文件類型，如果需要上傳其他非圖片格式的文件，你只要修改對應的擴展名即可。
前端部分的配置暫時結束，下面來看後台處理程序中的配置。打開admin/server/upload/文件夾，在up.php文件中，我們可以發現需要配置的參數有以下三個uploadPath, fileType 和 fileSize。有你後兩個參數的存在表示疑問，認為前端已經通過Flash限制了文件大小和文件類型，此處不需要再進行限制。這種認識其實是不對的，有經驗的hacker們完全可以通過自己構造提交表單來繞開前端Flash的各種限制，直接上傳文件到我們的伺服器。
我們重點來看uploadPath這個參數。默認狀態下，這個參數的配置會在up.php文件所在目錄的父目錄中創建一個uploadfiles文件夾，並將圖片保存在這個文件夾中。完成圖片的保存之後需要返回的字元串是一個純粹的json字元串，形如
{'url':'../uploadfiles/23123213.jpg','title':'描述','state':'SUCCESS'}
此處需要說明的一點是url這個參數。可以看到，當前這個url參數中攜帶了「../」這樣的相對路徑，這種表示方式由於具有明顯的上下文含義，因此不大適合於用來進行跨頁面的數據傳遞。如果非要使用這種路徑傳遞方式，那麼必須在圖片顯示頁面進行地址修正。 一般來說，比較正確的做法是在返回給客戶端之前將相對路徑轉換成帶域名的絕對路徑，這一步操作一般應該結合後台的網站根目錄配置來完成。UEditor不希望了解具體的伺服器端配置，因此在此處進行了另外一種處理：去掉所有./以及../等相對路徑的字元串，只返回從uploadfiles開始的圖片路徑，如「uploadfiles/23123213.jpg」， 然後通過在editor_config.js中配置imagePath這個參數來修正圖片的真實地址。imagePath代表的含義是uploadfiles文件夾所在的文件夾地址。以當前實例項目為例，uploadfiles位於server目錄底下，所以imagePath的值應該設置為「admin/server/」。此處之所以從根目錄開始，原因同完整版部署時候說的一樣，是因為editor_config.js被index.php導入，所以其真實路徑就是根目錄。 另外一個state參數則是由後台的具體邏輯來確定，其值可自定義，但如果上傳成功，必須返回「SUCCESS」字元串，其他狀態將直接在預覽框中展示。
到此為止，圖片上傳所需要的所有配置和修改就已經完成了。在地址欄中輸入地址，體驗下UEditor提供的強大的圖片上傳功能吧！
PS:JSP版的圖片上傳採用了commons-fileupload包，請先下載commons-fileupload-1.2.2.jar，並將其加入到項目中的WEB-INF/lib/目錄下方可正常使用