Ueditor編輯器圖片上傳

UEditor的圖片上傳采用了Flash上傳的方式，在功能上支持批量、本地預覽和實時進度提示，在界面上支持自定義背景、上傳按鈕和預覽框等視覺元素的樣式屬性，基本能夠滿足各種用戶的不同上傳需求。
由于涉及到了后端開發(fā)語言、flash、js和html等各種不同的web元素，圖片上傳這塊的配置和使用相對來說稍顯復雜，不過只要你認真看完以下的內(nèi)容，那一切都不是什么問題了。下面我們?nèi)匀灰陨衔闹械耐暾鎸嵗齺硪徊揭徊酵瓿蛇@個過程。
先來回顧一下完整版部署章節(jié)中提到的項目目錄結(jié)構(gòu)，如下左圖所示。為了更加符合一般網(wǎng)站的具體實際，也為了更清晰地展示整體的路徑配置流程，我們先對這個目錄做一下小的改動：將ueditor目錄下的server文件夾提取出來放置到根目錄中的admin文件夾下。調(diào)整后的目錄結(jié)構(gòu)如下右圖所示

首先來看前端部分的文件及其配置。打開dialogs/image文件夾，我們可以發(fā)現(xiàn)四個文件：
? callback.js：本上傳模塊支持的所有回調(diào)函數(shù)，你可以按需選用其中的內(nèi)容。對于不需要做二次開發(fā)的你說，可以放心地直接刪除。
? image.html：圖片上傳對話框的主體文件。前端的配置和修改基本在此處完成。
? imageUploader.swf：Flash上傳文件。
? tangram.js：百度前端框架tangram封裝的flash操作模塊。一般無需修改。
打開image.html文件，找到baidu.swf.create()方法，有關圖片上傳的大部分配置都在這里進行。這其中的絕大部分參數(shù)相信你對著注釋都能很容易明白意思，下面將挑選幾個需要稍微解釋的參數(shù)進行講解：
首先是backgroundUrl、listBackgroundUrl和buttonUrl這三個參數(shù)。UEditor為了讓上傳flash的界面能夠滿足各種不同的網(wǎng)站風格，預留出了這三個參數(shù)讓你可以自己定義上傳框的背景、圖片預覽框的背景和上傳按鈕的背景，默認留空情況下就是同學們看到的樣式。
其次是compressSide和compressLength這兩個參數(shù)。前者規(guī)定了上傳圖片等比壓縮的基準邊，后者規(guī)定了前者定義的基準邊的最大邊長，并以該值為基準進行等比縮放。此處的值設置是通過讀取配置文件中的maxImageSideLength值來進行，嫌麻煩的可以直接設置數(shù)值即可。
第三個是url參數(shù)。這個參數(shù)設置了圖片上傳后臺處理程序的路徑。以當前項目示例來說，此處的url值應該是“../../../admin/server/upload/up.php”。
第四個要介紹的參數(shù)是ext。這個參數(shù)允許讓你自己定義需要向后端post的參數(shù)。只要書寫符合我們demo中的格式，后臺就可以直接像接收一個普通的表單項一樣的方式來接收對應的自定義值。
最后一個需要要介紹的參數(shù)是fileType。它在前端限定了文件選擇框中能夠顯示的文件類型，如果需要上傳其他非圖片格式的文件，你只要修改對應的擴展名即可。
前端部分的配置暫時結(jié)束，下面來看后臺處理程序中的配置。打開admin/server/upload/文件夾，在up.php文件中，我們可以發(fā)現(xiàn)需要配置的參數(shù)有以下三個uploadPath, fileType 和 fileSize。有你后兩個參數(shù)的存在表示疑問，認為前端已經(jīng)通過Flash限制了文件大小和文件類型，此處不需要再進行限制。這種認識其實是不對的，有經(jīng)驗的hacker們完全可以通過自己構(gòu)造提交表單來繞開前端Flash的各種限制，直接上傳文件到我們的服務器。
我們重點來看uploadPath這個參數(shù)。默認狀態(tài)下，這個參數(shù)的配置會在up.php文件所在目錄的父目錄中創(chuàng)建一個uploadfiles文件夾，并將圖片保存在這個文件夾中。完成圖片的保存之后需要返回的字符串是一個純粹的json字符串，形如
{'url':'../uploadfiles/23123213.jpg','title':'描述','state':'SUCCESS'}

此處需要說明的一點是url這個參數(shù)?？梢钥吹?#xff0c;當前這個url參數(shù)中攜帶了“../”這樣的相對路徑，這種表示方式由于具有明顯的上下文含義，因此不大適合于用來進行跨頁面的數(shù)據(jù)傳遞。如果非要使用這種路徑傳遞方式，那么必須在圖片顯示頁面進行地址修正。 一般來說，比較正確的做法是在返回給客戶端之前將相對路徑轉(zhuǎn)換成帶域名的絕對路徑，這一步操作一般應該結(jié)合后臺的網(wǎng)站根目錄配置來完成。UEditor不希望了解具體的服務器端配置，因此在此處進行了另外一種處理：去掉所有./以及../等相對路徑的字符串，只返回從uploadfiles開始的圖片路徑，如“uploadfiles/23123213.jpg”， 然后通過在editor_config.js中配置imagePath這個參數(shù)來修正圖片的真實地址。imagePath代表的含義是uploadfiles文件夾所在的文件夾地址。以當前實例項目為例，uploadfiles位于server目錄底下，所以imagePath的值應該設置為“admin/server/”。此處之所以從根目錄開始，原因同完整版部署時候說的一樣，是因為editor_config.js被index.php導入，所以其真實路徑就是根目錄。 另外一個state參數(shù)則是由后臺的具體邏輯來確定，其值可自定義，但如果上傳成功，必須返回“SUCCESS”字符串，其他狀態(tài)將直接在預覽框中展示。
到此為止，圖片上傳所需要的所有配置和修改就已經(jīng)完成了。在地址欄中輸入地址，體驗下UEditor提供的強大的圖片上傳功能吧！
PS:JSP版的圖片上傳采用了commons-fileupload包，請先下載commons-fileupload-1.2.2.jar，并將其加入到項目中的WEB-INF/lib/目錄下方可正常使用

總結(jié)

以上是生活随笔為你收集整理的Ueditor编辑器图片上传的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。