phpueditor圖片上傳
1. 請問:百度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/目錄下方可正常使用
2. ueditor富文本編輯器上傳圖片怎麼配置
1. 前端配置項
前端需要配置 serverUrl 參數,修改 ueditor.config.js 里的 serverUrl 參數,改成伺服器端路徑,參考:URL + 'php/controller.php'
2. 後端配置項
後端配置項在 php/config.json 里配置,不同的上傳有各自的配置項。
修改上傳圖片路徑的參數是 imagePathFormat ,改成你的圖片文件夾路徑即可。
3. ueditor php版 編輯器 上傳圖片和視頻出現報錯』伺服器返回出錯』 大哥大姐知道是什麼原
其實我也碰到這樣的問題,因為試過很多方法,所以用了多個站來測。事後發現,其中有一個版本因為多次更改,具體忘了改哪一步,沒有再出現伺服器返回出錯,可以正常上傳和播放視頻。所以可以確定以下問題:
1、由於本地測試的。所以確認本地軟體伺服器是沒有任何問題的,雖然前面更改過,但配置文件更換另外一個站點是不影響的。即上傳文件大小限制不是主要影響因素,前期修改過配置文件,將上傳的限制改到過100M。
2、因為模板曾經修改過,所以用原來沒有更改的模板再次測試是有同樣的問題,所以確定自己按需修改後的模板是不會有問題的。
3、將能夠正常上傳的所有Ueditor內的文件復制到有問題的站點測試,同樣是不行,所以網上有些修改這個文件夾內的JS應該是沒效果的。
4、由於是本地測試,都是在本地軟體伺服器(同一個文件夾下出現這樣的問題),所以應該也不是許可權的問題。
5、所以也還是不清楚到底哪裡出了問題。。。。只能提供一種思路給後面的人解答。有答案別忘了回復我。
6、昨天可以正常上傳的版本後台更改了一下,然後又出現這樣的問題,看起來好像是路徑出了問題。
7、不得已,採用了另外一種辦法。那就是利用後台,或者是文件管理器,再或者是FTP工具將視頻上傳到網站上,然後在編輯文章的時候添加代碼
<p><video class="ei-upload-video vjs-default-skin video-js" controls="" preload="none" width="420" height="280" src="/ueditor/php/upload/video/20191118/1574062351165026.mp4" data-setup="{}"> <source src="/ueditor/php/upload/video/20191118/1574062351165026.mp4" type="video/mp4"/></video></p>
注意文件路徑,樣式可以自行修改。經過臨時域名的線上測試,視頻是可以播放的。技不如人只能這么麻煩了。
不想再改了,太麻煩了,沒時間。
4. ueditor1_4_3上傳圖片 文件格式不允許 使用(DWZ+ThinkPHP)開發的
有錯誤提示,沒有獲取到後台配置項,對應的圖片允許的格式也沒有獲取到,所以不管上傳什麼格式的圖片都會提示格式不允許,主要是解決後台獲取配置的問題,controller.php裡面查找問題
5. ueditor 1.2.6 使用方法說明
本文以 PHP 版本為例,詳細說明了如何使用 UEditor 1.2.6。首先,在本地的 PHP 環境下創建一個 "app" 目錄作為測試目錄,將下載的 UEditor 文件夾解壓至此。在 "app" 目錄下創建一個 "index.php" 文件,輸入以下代碼:
UEditor 提交示例
通過 js 調用 submit 提交在瀏覽器中輸入 "localhost/app/" 查看編輯器,發現圖片上傳功能無法使用。打開 "ueditor.config.js" 文件,在對應代碼的上方添加以下代碼:
js
window.UEDITOR_HOME_URL||"/app/ueditor/";
刷新頁面後,圖片上傳功能即可正常使用。對於 UEditor 的官方說明文檔,請訪問 官方文檔地址。注意文檔中可能存在的文件名錯誤(在版本升級後未更正),請大家審慎查看。