天天躁日日躁狠狠躁黑人躁,欧美三级在线观看黄,国产精品资源站

WEB中JS剪切板圖片粘貼上傳

admin

2021年1月21日 11:4 本文熱度 3489

一、背景

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

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

二、代碼實現

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;
            }
        }
    }
});

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

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

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

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

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

（2）通過formData醬文件對象轉換為二進制數據

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

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

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);