[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

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

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

    1. [...] 承前一篇使用Servlet上傳檔案,此篇改寫Servlet使用JSP來上傳圖片、Flash或檔案,取得設定檔部份由web.xml設定改成讀取外部properties設定檔,在前端javascript部份只需要修改CKConfig裡的上傳使用的三個參數就可以了。 filebrowserUploadUrl : 'CKEditorUpload.jsp?Type=File', filebrowserImageUploadUrl : 'CKEditorUpload.jsp?Type=Image', filebrowserFlashUploadUrl : 'CKEditorUpload.jsp?Type=Flash', [...]

    發表迴響