一 . 背景及效果

當前網際網路上傳檔案最多的就是圖片檔案了，但是傳統web圖片的截圖上傳需要：截圖儲存->選擇路徑->儲存後再點選上傳->選擇路徑->上傳->插入。
圖片檔案上傳也需要：選擇路徑再->上傳->插入，步驟繁雜，網際網路體驗為王，如果支援截圖貼上上傳、拖拽上傳將大大提升體驗。
當前知乎和github對現代瀏覽器均支援這兩種特性，閒來無事就學習實現了一下，今天就說一說這個1kb外掛實現什麼功能，怎麼使用和原理。

首先看一下插效果:

• 截圖後直接貼上上傳。
  

• 拖拽上傳
  

http網路

二.使用示例

直接呼叫：

<div
 
 id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>
<script type="text/javascript" src="UploadImage.js"></script>

  new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上傳完成後的回撥
                    var img = new Image();
                    img.src = xhr.responseText;
                    this.appendChild(img);
                });
 

AMD/CMD

<div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>
            <script type="text/javascript" src="require.js"></script>
            <script>
                require(['UploadImage'], function (UploadImage) {

                    new
 
 UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上傳完成後的回撥
                        var img = new Image();
                        img.src = xhr.responseText;
                        this.appendChild(img);
                    });

                })
            </script>

三.瀏覽器支援

當前版本只支援以下，瀏覽器，後期可能會支援更多瀏覽器。

• IE11
• Chrome
• FireFox
• Safari(未測式，理論應該支援)

四.原理及原始碼

1. 貼上上傳
   處理目標容器（id）的paste事件，讀取e.clipboardData中的資料，如果是圖片進行以下處理：
   用H5 File API(FileReader)獲取檔案的base64程式碼，並構建FormData非同步上傳。
2. 拖拽上傳
   處理目標容器（id）的drop事件，讀取e.dataTransfer.files（H5 File API: FileList）中的資料，如果是圖片並構建FormData非同步上傳。

以下是初版本程式碼，比較簡單。不再贅述。

部份核心程式碼

function UploadImage(id, url, key)
    {
        this.element = document.getElementById(id); 
        this.url = url; //後端處理圖片的路徑
        this.imgKey = key || "PasteAreaImgKey"; //提到到後端的name

    }
    UploadImage.prototype.paste = function (callback, formData) 
    {
        var thatthat = this;
        this.element.addEventListener('paste', function (e) {//處理目標容器（id）的paste事件

                if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) {
                    var that = this,
                        reader =  new FileReader();
                    file = e.clipboardData.items[0].getAsFile();//讀取e.clipboardData中的資料：Blob物件

                    reader.onload = function (e) { //reader讀取完成後，xhr上傳
                        var xhr = new XMLHttpRequest(),
                            fd = formData || (new FormData());;
                        xhr.open('POST', thatthat.url, true);
                        xhr.onload = function () {
                            callback.call(that, xhr);
                        }
                        fd.append(thatthat.imgKey, this.result); // this.result得到圖片的base64
                        xhr.send(fd);
                    }
                    reader.readAsDataURL(file);//獲取base64編碼
                }
            }, false);
    }

後端及詳細程式碼請移步：github:https://github.com/etoah/ImgUploadJS

五. 其它功能

部份功能還在開發中，歡迎提建議或意見。

評論：

#1樓 2016-01-19 08:57 troy.cui
不錯的，如果有那種多圖上傳的功能就好了

回覆 引用 #2樓 [樓主] 2016-01-19 09:26 Lucien!
@ troy.cui
就是一下拖拽多個圖上傳麼,後期可能會新增此功能.

回覆 引用 #3樓 2016-01-19 09:44 EcitGis
mark

回覆 引用 #4樓 2016-01-19 13:33 為之則易
不錯，期待弄成一個基於HTML5的富文字編輯器

回覆 引用 #5樓 [樓主] 2016-01-19 15:34 Lucien!
@ 為之則易
多謝支援,搞成markdown是不是更好.

回覆 引用 #6樓 2016-01-19 16:17 #張志豪#
好文

回覆 引用 #7樓 2016-01-19 23:17 freed
很棒！

回覆 引用 #8樓 2016-01-20 09:17 julianking
不錯，學習了

回覆 引用 #9樓 2016-01-20 09:35 Yz's
不錯 部落格園就沒這功能=- =

回覆 引用 #10樓 2016-01-20 16:35 天命輝煌
不錯，可以去看看WebUploader

回覆 引用 #11樓 2019-10-10 10:09 梓萱IT民工
這個拖拽功能能否整合到kindEditor編輯器中？

回覆 引用 #12樓 2019-10-10 10:16 愛曉俊
如何將拖拽功能整合到kindEditor編輯器中？

回覆 引用 #13樓 2019-12-04 10:08 208小倩
你好，怎麼實現複製圖片（包括電腦系統裡的、截圖等等），貼上（ctrl+v）直接上傳給後臺

出處：https://www.cnblogs.com/etoah/p/5140650.html