• About Me
  • Java基礎教學
  • 部落格聯播

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

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

        filebrowserUploadUrl : 'ckeditor/uploader?Type=File',//檔案上傳的url
        filebrowserImageUploadUrl : 'ckeditor/uploader?Type=Image',//圖檔上傳的url
        filebrowserFlashUploadUrl : 'ckeditor/uploader?Type=Flash',//flash上傳的url

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

檔案上傳(插入超連結)

檔案上傳(插入超連結)

上傳Flash

上傳Flash

上傳Image圖檔

上傳Image圖檔picture

詳細文章

[ExtJS]WYSIWYG所視即所得網頁編輯器外掛 with CKEditor

ExJS所提示的HtmlEditor非常簡單,一般來說算夠用了,不過還是有很多狀況無法適用,所幸ExtJS可利用擴充的方式來使用其它的WYSIWYG編輯器,TinyMCE是個很好的選擇,FCKEditor也不錯,現在重新被制作改名成CKEditor,以下的範例是使用CKEditor來砍進ExJS當成它的HtmlEditor。

CKEditor.png

詳細文章

[ExtJS]TaiwanZipCode台灣郵遞區號外掛

TaiwanZipCode郵遞區號的作法大同小異,比較常用的像是台灣郵遞區號外掛 / Taiwan Zip Code Plugin of jQuery就很簡單也很好用,可控制性也很高。

Taiwan ZipCode作法其實不難,只是因應各種不同framework可能有所調整,主要都是由二個ComboBox組成,當選取縣市別後,會取得鄉鎮別,觸發點只有一個。

執行畫面如下

TaiwanZipCode.png

詳細文章

網頁post自動產生iframe

大部份在寫網頁要上傳檔案時都需要使用到iframe做一個中繼,可是如果上傳POST時有錯訊息時,前一個iframe資料就會變成記錄history,而此時如果使用者重新整理時,就會遇到暫存資料的問題,iframe裡的內容會再被執行一次。

以下有一個JavaScript方法,可以在檢查完所有form條件時才自動建立iframe內容createiFrame做post動作,而重新整理時(或第一次進入此畫面時)又不會真實存在,來解決暫存的問題。

當呼叫createIFrame時,會在body這一個tab建立一個iframe元素,並把需求屬性設定好,像是frameborder=0、width=0、height=0等。

function createIFrame() {
        if (!document.getElementById("_hiddenframe"))
        {
            var frame = document.createElement("iframe");
            frame.setAttribute("name", "_hiddenframe1");
            frame.setAttribute("src", "about:blank");
            frame.setAttribute("frameborder", "0");
            frame.setAttribute("height", "0");
            frame.setAttribute("width", "0");
            frame.setAttribute("id", "_hiddenframe");
            frame.name = "_hiddenframe";
            document.body.appendChild(frame);
            window.frames._hiddenframe.name = "_hiddenframe";
            document.getElementsByTagName("body")[0].appendChild(frame);
 
        }
 
    }

Ajax使用 prototype.js 3

這裡是一個簡單的範例

在使用prototype.js可以很方便的利用DOM的特性來做一些事情

下一篇將會利用ajax來實做這個範例 詳細文章