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

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

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

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

原理分析：
復(fù)制=>粘貼=>上傳

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

需要明白的是：

我們只能上傳截圖工具截的圖片(qq截圖、微信截圖等)，不能粘貼上傳系統(tǒng)里的圖片(從桌面上、硬盤里復(fù)制)，因?yàn)樗麄兪谴嬖谕耆煌牡胤健?/p>

知悉paste event這個(gè)事件：當(dāng)進(jìn)行粘貼（右鍵paste/ctrl+v）操作時(shí)，該動(dòng)作將觸發(fā)名為'paste'的剪貼板事件，這個(gè)事件的觸發(fā)是在剪貼板里的數(shù)據(jù)插入到目標(biāo)元素之前。如果目標(biāo)元素（光標(biāo)所在位置）是可編輯的元素（設(shè)置了contenteditable屬性的div。textarea并不行），粘貼動(dòng)作將把剪貼板里的數(shù)據(jù)，以最合適的格式，插入到目標(biāo)元素里；如果目標(biāo)元素不可編輯，則不會(huì)插入數(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)頁(yè)圖片復(fù)制粘貼的），ie11，firefox沒有這樣的api，不過依然有辦法可以獲取，因?yàn)閿?shù)據(jù)已經(jīng)表現(xiàn)在img的src里了，對(duì)于截圖粘貼的，直接取img的src屬性值（base64），對(duì)于網(wǎng)頁(yè)粘貼的，則把地址傳給后臺(tái)，然后根據(jù)地址down下來，存在自己的服務(wù)器，最后把新地址返回來交給前端展示就ok了。為了保持一致性便于管理，統(tǒng)一將所有情況（截圖、網(wǎng)頁(yè)）中的img的src屬性替換為自己存儲(chǔ)的地址。

完整例子：

<!DOCTYPE html>
<html>

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

<body>
    復(fù)制粘貼上傳圖片：
    <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("請(qǐng)粘貼圖片上傳");
                })
                $("#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)
                        }
                    }
                });

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

</html>

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

您可能感興趣的文章: