一、背景

在H5技術發(fā)展如火如荼的今天，前端，再也不是頁面的代名詞，而今的前端早已不再是寫寫頁面寫寫簡單的交互了，現(xiàn)在的前端相比十年前的前端已經(jīng)發(fā)生了翻天覆地的變化，像近幾年出現(xiàn)的angularjs，vuejs，react等前端框架已被廣泛應用于各類在線協(xié)作平臺，webapp中，誰又還能說前端很簡單呢？

在以前，對于上傳的實現(xiàn)，最原始的做法就是通過在form表單中放置type為file的input標簽，然后用戶選擇后提交上傳，但是頁面在提交的時候會刷新，這種用戶體驗非常不友好，后來出現(xiàn)了xmlRequest，借助xhr我們可以在不刷新頁面的情況下直接上傳圖片，用戶體驗有了很大的提升，但是我們還想再進一步，接著出現(xiàn)了dataTransfer和formData，我們發(fā)現(xiàn)可以通過借助dataTransfer和formData實現(xiàn)從電腦的資源管理器直接拖拽圖片到網(wǎng)頁上傳，具體過程是從電腦拖拽圖片到網(wǎng)頁，js在drop的事件中取到當前事件對象的dataTransfer進而得到文件對象，然后實例化formData對象，借助xhr異步上傳圖片，這無疑是一個錦上添花的功能，至此，對于上傳的用戶體驗已經(jīng)達到了一定的告訴，那么我們是不是就不能再進一步，玩點更高逼格的東西，讓用戶體驗再上一個臺階了呢？這就是我今天要說的，剪切板圖片粘貼上傳，這個沒什么太多可講的，就是一些API的應用，所以直接看實現(xiàn)了。

二、代碼實現(xiàn)

1、首先我們看一下怎么獲取剪切版中的圖片

document.addEventListener(''paste'', function(event) {
    var items = (event.clipboardData && event.clipboardData.items) || [];
    var file = null;
 
    if (items && items.length) {
        for (var i = 0; i < items.length; i++) {
            if (items[i].type.indexOf(''image'') !== -1) {
                file = items[i].getAsFile();
                break;
            }
        }
    }
});

注意：這上面有一個坑，記住一定不要用數(shù)組的find方法去查找圖片item，因為items是一個偽數(shù)組，并沒有find方法

以上代碼執(zhí)行過程，全局監(jiān)聽paste事件，當粘貼事件觸發(fā)時遍歷剪切版對象（clipboardData）中的所有items，找到類型為圖片的item并調(diào)用getAsFile方法得到文件對象，拿到file 對象后我們有兩種選擇：

（1）通過fileReader得到文件對象的base64字符串，實現(xiàn)代碼：

var reader = new FileReader();
reader.onload = function(e){
  // 通過e.target.result取到base64然后上傳
  // 作為src設到image標簽上預覽
}
reader.readAsDataURL(file); //此處的file為上面得到的文件對象

在得到了base64字符串后我們可以傳遞給后端，后端接受base64并存儲，如果我們需要在上傳前或者上傳過程中預覽圖片，可以直接將上面得到的base64數(shù)據(jù)作為src傳遞給image標簽然后預覽。

（2）通過formData醬文件對象轉換為二進制數(shù)據(jù)

var formData = new FormData();
formData.append(''file'', file);

2、上傳，不管我們選擇使用base64還是formData，在得到了數(shù)據(jù)后接下來要做的就是上傳，對于base64的上傳這里就不做演示了，這里僅演示一下formData的上傳，其實都一樣，實現(xiàn)代碼：

var xhr = new XMLHttpRequest();
xhr.onload = function () {
  try {
    // 取得響應消息
    var result = JSON.parse(this.responseText);
  } catch(err) {
    console.log(err)
  }
};
xhr.open(''POST'', ''./upload_file.php'', true);
xhr.send(formData);

當然上面的上傳只是上傳了圖片，如果除了圖片還需要上傳其他內(nèi)容比如文件名，時間之類的，只需要在初始化formData的時候再添加字段就行了。

后端保存就不說了，不同人有不同的選擇，node，.net, php，java只要用的順手，都行。

三、局限性

對于qq，微信等的截圖或者按print screen得到的截圖，還有任意網(wǎng)頁的右擊復制圖片都能完美支持，但是，對于電腦本地圖片文件的復制沒辦法從剪切版獲取到，如果有哪位朋友發(fā)現(xiàn)了可以實現(xiàn)的方法，請一點要告訴我一下，謝謝！

四、兼容性

對于chrome和safari經(jīng)過測試，完美支持，對于safari使用方式有些差別，而且只能在設置了contenteditable屬性額元素身上才能觸發(fā)，要是遇到了IE就直接放棄吧，三個字不支持，多的就不說了，說多了都是淚。