Kindeditor圖片粘貼上傳(chrome)

原文鏈接:https://www.cnblogs.com/jsper/p/7608004.html

kindeditor4.1.x版本已支持圖片批量上傳,不過傳統的選文件上傳的方式依然效率低下。

很多時候,編輯人員可能需要將一個文檔中圖片上傳到網上,那麼,按照傳統的上傳方法,他必須先將圖片另存爲到本機,再用編輯器的上傳選擇文件進行上傳。

這個過程至少要做這幾個動作:在文檔中圖片上點右鍵 -> 點另存爲 -> 選擇目錄 -> 點保存。上傳時:點上傳按鈕 -> 選擇目錄 -> 選擇文件。

可以看到,上傳一張圖片是十分繁瑣的工作,特別時在選擇目錄的時候,那個小小的文件瀏覽器界面和千篇一律的文件夾定位,能使人抓狂。

網站編輯人員經常問我能不能從word中直接複製圖片粘貼上傳?

這個問題我自己也有疑問。帶着這個疑問查閱了一些資料,經過學習研究,最終發現,通過很小的代碼量就可以實現這個功能。

於是我對kindeditor進行了一下“擴展”。chrome61下測試通過。

----------------------

通過搜索引擎查閱了一些資料,發現用最新瀏覽器技術是可以無障礙實現這個想法的。

大體要求及流程是:

1.編寫paste粘貼事件的監聽處理。

2.從剪切板獲取數據。

3.ajax二進制上傳。

4.顯示到編輯器裏。

實現思路是運用kindeditor提供的api+javascript代碼結合實現。

把代碼寫到kindeditor的創建與初始化配置中,最終代碼(可重點故關注註釋):

kindeEditor = KindEditor.create('#updatePapers_contentEditor', {

    /***
     * 圖片上傳必須使用絕對路徑,因爲KindeEditor有個缺陷,
     * 它的批量上傳和單個上傳界面文件在不同級別的目錄下,
     * 用相對路徑時,總是隻能成功一種模式,另一種就不會成功,所以只能這樣用絕對路徑.
     */
    uploadJson : '/fileupload',//服務器文件上傳接收程序路徑
    urlType : '',
    resizeType:0,
    //調用kindeditor的afterCreate回調函數對kindeditor功能進行“擴展”,實現圖片粘貼上傳。
    afterCreate:function() {
        var editerDoc = this.edit.doc;//得到編輯器的文檔對象
        //監聽粘貼事件, 包括右鍵粘貼和ctrl+v
        $(editerDoc).bind('paste', null, function (e) { 
            /*獲得操作系統剪切板裏的項目,e即kindeditor,
             *kindeditor創建了originalEvent(源事件)對象,
             *並指向了瀏覽器的事件對象,而chrome瀏覽器
             *需要通過clipboardData(剪貼板數據)對象的items
             *獲得複製的圖片數據。
             */
            var ele = e.originalEvent.clipboardData.items;
            for (var i = 0; i < ele.length; ++i) {
                //判斷文件類型
                if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {
                    var file = ele[i].getAsFile();//得到二進制數據
                    //創建表單對象,建立name=value的表單數據。
                    var formData = new FormData();
                    formData.append("imgFile",file);//name,value

                    //用jquery Ajax 上傳二進制數據
                    $.ajax({
                        url : '/fileupload?dir=image',
                        type : 'POST',
                        data : formData,
                        // 告訴jQuery不要去處理髮送的數據
                        processData : false,
                        // 告訴jQuery不要去設置Content-Type請求頭
                        contentType : false,
                        dataType:"json",
                        beforeSend:function(){
                            //console.log("正在進行,請稍候");
                        },
                        success : function(responseStr) {
                            //上傳完之後,生成圖片標籤回顯圖片,假定服務器返回url。
                            var src = responseStr.url;
                            var imgTag = "<img src='"+src+"' border='0'/>";

                            //console.info(imgTag);
                            //kindeditor提供了一個在焦點位置插入HTML的函數,調用此函數即可。
                            kindeEditor.insertHtml(imgTag);


                        },
                        error : function(responseStr) {
                            console.log("error");
                        }
                    });

                }

            }


        });
    }
});

功能雖然有了,但是功能並不是很細緻,實際應用中可能還要考慮壓縮,圖片尺寸縮略。不過這些對於新一代瀏覽器都不是問題了,都有現成的api調用,可以直接實現。

另外,還不知道其他瀏覽器(IE9以上、Firefox、Safari等)是否能用。

我在搜索“瀏覽器粘貼上傳”,發現了知乎上的一篇探討:

 《知乎回答問題編輯框用 Ctrl+V 粘貼圖片是如何實現的?》https://www.zhihu.com/question/20893119

裏面有幾位大牛的代碼非常吸引我,給了我實現這個功能的最基本要素。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章