狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv

一、背景

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

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

二、代碼實(shí)現(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;
            }
        }
    }
});

注意：這上面有一個(gè)坑，記住一定不要用數(shù)組的find方法去查找圖片item，因?yàn)閕tems是一個(gè)偽數(shù)組，并沒(méi)有find方法

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

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

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

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

（2）通過(guò)formData醬文件對(duì)象轉(zhuǎn)換為二進(jìn)制數(shù)據(jù)

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

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

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

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

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

三、局限性

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

四、兼容性

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