我們或多或少都使用過(guò)各式各樣的富文本編輯器，其中有一個(gè)很方便功能，復(fù)制一張圖片然后粘貼進(jìn)文本框，這張圖片就被上傳了，那么這個(gè)方便的功能是如何實(shí)現(xiàn)的呢？
原理分析：
復(fù)制=>粘貼=>上傳
在這個(gè)操作過(guò)程中，我們需要做的就是：監(jiān)聽(tīng)粘貼事件=>獲取剪貼板里的內(nèi)容=>發(fā)請(qǐng)求上傳
需要明白的是：
我們只能上傳截圖工具截的圖片(qq截圖、微信截圖等)，不能粘貼上傳系統(tǒng)里的圖片(從桌面上、硬盤(pán)里復(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ù)在粘貼的過(guò)程中是只讀的。
監(jiān)聽(tīng)了paste事件，也知道了表現(xiàn)形式，接下來(lái)就是如何獲取數(shù)據(jù)了：
chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回調(diào)函數(shù)里獲取到剪貼板里圖片的base64編碼字符串（無(wú)論是截圖粘貼的還是網(wǎng)頁(yè)圖片復(fù)制粘貼的），ie11，firefox沒(méi)有這樣的api，不過(guò)依然有辦法可以獲取，因?yàn)閿?shù)據(jù)已經(jīng)表現(xiàn)在img的src里了，對(duì)于截圖粘貼的，直接取img的src屬性值（base64），對(duì)于網(wǎng)頁(yè)粘貼的，則把地址傳給后臺(tái)，然后根據(jù)地址down下來(lái)，存在自己的服務(wù)器，最后把新地址返回來(lái)交給前端展示就ok了。為了保持一致性便于管理，統(tǒng)一將所有情況（截圖、網(wǎng)頁(yè)）中的img的src屬性替換為自己存儲(chǔ)的地址。
完整例子：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
|
<!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中顯示出來(lái) e.preventDefault(); } } }); </script></body></html> |
以上就是Js實(shí)現(xiàn)粘貼上傳圖片的原理及示例的詳細(xì)內(nèi)容，更多關(guān)于JS 粘貼上傳圖片的資料請(qǐng)關(guān)注服務(wù)器之家其它相關(guān)文章！
原文鏈接：https://blog.yzmcms.com/js/218.html
