神馬？使用JS直接上傳並預覽粘貼板的圖片？

時間 2019-12-08

標籤神馬使用直接上傳預覽粘貼圖片欄目 JavaScript 简体版

原文原文鏈接

（題圖：梵高-橄欖樹）javascript

提出需求

由於工做緣由，如今有一個需求就是須要用戶使用QQ或者微信複製一張截圖後，在div中直接粘貼這張圖片，而不是採用上傳的方式。相似咱們在使用QQ微信時直接粘貼截圖的操做，這個要怎麼用js來實現呢？html

實現原理

咱們能夠利用 Clipboard 這個接口API 來實現。前端

根據在MDN上的定義，Clipboard接口提供了一種讀寫操做系統剪貼板的方式。這樣咱們就能夠獲取剪貼板的內容，而後經過js插入到某個元素中。java

具體Clipboard API的MDN連接以下： developer.mozilla.org/zh-CN/docs/…ajax

在瀏覽器兼容性上面，能夠看到大致上，經常使用的瀏覽器都支持，不過IE就就只能是IE11及以上了。後端

獲取剪貼板的圖片

直接上代碼了。瀏覽器

// 將粘貼事件綁定到 document 上
document.addEventListener("paste", function (e) {

    let items = event.clipboardData && event.clipboardData.items;
    let file = null;
    if (items && items.length) {
        // 檢索剪切板items中類型帶有image的
        for (var i = 0; i < items.length; i++) {
            if (items[i].kind === 'file') { // 或者 items[i].type.indexOf('image') !== -1
                file = items[i].getAsFile(); // 此時file就是剪切板中的圖片文件
                break;
            }
        }
    }
}, false); 
複製代碼

若是複製的是文本的話，能夠這樣或者粘貼板的文本內容：服務器

let text = null;
if (items && items.length) {
    // 檢索剪切板items
    for (let i = 0; i < items.length; i++) {
        // ...
        if (items[i].kind === 'string') {
            text = event.clipboardData.getData('Text'); // 獲取文本內容
            break;
        }
    }
}
複製代碼

獲取到的是文本內容，能夠直接在前端顯示。微信

若是是圖片的話，就須要上傳到服務器，而後再在前端預覽，具體操做往下看。app

上傳到服務器

若是隻是圖片，能夠直接使用ajax將file保存到服務器便可。

或者經過 FormData 對象進行ajax上傳。

let formData = new FormData();
formData.append('file', file); // 將formData上傳便可
複製代碼

下次下載以後，經過get方法再次獲取到file文件。

let file = formData.get('file'); 
複製代碼

前端顯示預覽

上傳成功後，咱們須要及時在前端看到這個圖片，這個能夠經過FileReader對象就能夠作到。

let reader = new FileReader();

reader.readAsDataURL(file);

reader.onload = function (e) {
    let img = document.createElement("img");
    img.src = e.target.result;
    document.body.appendChild(img); // 將圖片插入body中
}
複製代碼

或者在html中定義好<img>標籤，直接修改圖片的src便可

reader.onload = function (e) {
    let img = document.getElementByName("img")[0];
    img.src = e.target.result;
}
複製代碼

注意：這裏e.target.result 獲得的是圖片的Base64格式的地址。

示例demo

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
    </head>
    <body>
        <script> // 將粘貼事件綁定到 document 上 document.addEventListener( 'paste', function(e) { let items = event.clipboardData && event.clipboardData.items; let file = null; if (items && items.length) { for (let i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { file = items[i].getAsFile(); // 此時file就是剪切板中的圖片文件 break; } } } // 若是須要上傳後端，只需使用ajax將file上傳便可。 // 這裏是ajax上傳操做... if (file.size === 0) { return; } // 上傳成功後，在回調函數中設置前端預覽 let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function(e) { let img = document.createElement('img'); img.src = e.target.result; document.body.appendChild(img); }; }, false ); </script>
    </body>
</html>

複製代碼