Js實現(xiàn)粘貼上傳圖片的原理及示例

更新時間：2020年12月09日 10:29:50 作者：袁志蒙

這篇文章主要介紹了Js實現(xiàn)粘貼上傳圖片的原理及示例，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下

我們或多或少都使用過各式各樣的富文本編輯器，其中有一個很方便功能，復制一張圖片然后粘貼進文本框，這張圖片就被上傳了，那么這個方便的功能是如何實現(xiàn)的呢？

原理分析：
復制=>粘貼=>上傳

在這個操作過程中，我們需要做的就是：監(jiān)聽粘貼事件=>獲取剪貼板里的內(nèi)容=>發(fā)請求上傳

需要明白的是：

我們只能上傳截圖工具截的圖片(qq截圖、微信截圖等)，不能粘貼上傳系統(tǒng)里的圖片(從桌面上、硬盤里復制)，因為他們是存在完全不同的地方。

知悉paste event這個事件：當進行粘貼（右鍵paste/ctrl+v）操作時，該動作將觸發(fā)名為'paste'的剪貼板事件，這個事件的觸發(fā)是在剪貼板里的數(shù)據(jù)插入到目標元素之前。如果目標元素（光標所在位置）是可編輯的元素（設置了contenteditable屬性的div。textarea并不行），粘貼動作將把剪貼板里的數(shù)據(jù)，以最合適的格式，插入到目標元素里；如果目標元素不可編輯，則不會插入數(shù)據(jù)，但依然觸發(fā)paste event。數(shù)據(jù)在粘貼的過程中是只讀的。

監(jiān)聽了paste事件，也知道了表現(xiàn)形式，接下來就是如何獲取數(shù)據(jù)了：

chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回調(diào)函數(shù)里獲取到剪貼板里圖片的base64編碼字符串（無論是截圖粘貼的還是網(wǎng)頁圖片復制粘貼的），ie11，firefox沒有這樣的api，不過依然有辦法可以獲取，因為數(shù)據(jù)已經(jīng)表現(xiàn)在img的src里了，對于截圖粘貼的，直接取img的src屬性值（base64），對于網(wǎng)頁粘貼的，則把地址傳給后臺，然后根據(jù)地址down下來，存在自己的服務器，最后把新地址返回來交給前端展示就ok了。為了保持一致性便于管理，統(tǒng)一將所有情況（截圖、網(wǎng)頁）中的img的src屬性替換為自己存儲的地址。

完整例子：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Js實現(xiàn)粘貼上傳圖片</title>
    <script src="jquery.js"></script>
</head>

<body>
    復制粘貼上傳圖片：
    <div id="content_img" contentEditable="true" style="width:500px;height:500px;border:1px solid #000;"></div>
    <script>
        document.getElementById('content_img').addEventListener('paste', function(e) {
        if (!(e.clipboardData && e.clipboardData.items)) {
            return;
        }
        for (var i = 0, len = e.clipboardData.items.length; i < len; i++) {
            var item = e.clipboardData.items[i];
            if (item.kind === "string") {
                item.getAsString(function(str) {
                    console.log(str);
                    alert("請粘貼圖片上傳");
                })
                $("#content_img").html(""); 
            } else if (item.kind === "file") {
                var blob = item.getAsFile();
                console.log(blob);
                if (blob.size === 0) {
                    return;
                }
                var data = new FormData();
                data.append("image", blob);
                $.ajax({
                    url: "http://www.yzmcms.com/upload.php",
                    type: 'POST',
                    cache: false,
                    data: data,
                    processData: false,
                    contentType: false,
                    dataType: "json", 
                    success: function(result) {
                        console.log(result);
                        if (result.status) {
                            var html = "<img src=" + result.data + " width='100' height='100'>";
                            $("#content_img").append(html);
                        } else {
                            console.log(result.message)
                        }
                    }
                });

                //阻止默認行為即不讓剪貼板內(nèi)容在div中顯示出來
                e.preventDefault();
            }
        }
    });
    </script>
</body>

</html>

以上就是Js實現(xiàn)粘貼上傳圖片的原理及示例的詳細內(nèi)容，更多關于JS 粘貼上傳圖片的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: