[ExtJS]使用Servlet上傳檔案圖片-WYSIWYG所視即所得網頁編輯器外掛 with CKEditor

在上一篇[ExtJS]WYSIWYG所視即所得網頁編輯器外掛 with CKEditor有提到如何在ExtJS裡使用WYSIWYG所視即所得的網頁編輯器,不過並沒有上傳檔案或圖片的功能,要開啟上傳的功能只需要在CKConfig增加三個參數設定指定要做上傳動作的url就可以啟動了,在這篇並附上Servlet實作傳檔的功能。

加上以上參數後會在以下三個動作加上一個上傳的tab,可上傳檔案至Server端存放

檔案上傳(插入超連結)

檔案上傳(插入超連結)

上傳Flash

上傳Flash

上傳Image圖檔

上傳Image圖檔picture




上傳完成後會呼叫javascript function來設定資訊,ex影像資訊

ExtJS CKEditor上傳Picture後存放的路徑及檔案

ExtJS CKEditor預覽上傳結果

程式碼部份跟上一篇是相同的,補上修改的部份及Servlet上傳範例

example.js

ckeditor.CKEditorUploadServlet.java

web.xml Servlet設定部份

註:此範例下載後在tomcat 6及jdk1.6下可使用,如需在其它環境上請再自行編譯過
註:form物件記得frame: true才能上傳圖片喔

原始碼下載

下一篇會介紹改寫Servlet後的jsp上傳檔案方式

參考網站:

http://sarin.javaeye.com/blog/599499

One thought to “[ExtJS]使用Servlet上傳檔案圖片-WYSIWYG所視即所得網頁編輯器外掛 with CKEditor”

發表迴響

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料