摘要：我們或多或少都使用過各式各樣的富文本編輯器，其中有一個很方便功能，復制一張圖片然后粘貼進文本框，這張圖片就被上傳了，那么這個方便的功能是如何實現(xiàn)的呢？復制=>粘貼=>上傳...
我們或多或少都使用過各式各樣的富文本編輯器，其中有一個很方便功能，復制一張圖片然后粘貼進文本框，這張圖片就被上傳了，那么這個方便的功能是如何實現(xiàn)的呢？
原理分析：
復制=>粘貼=>上傳
在這個操作過程中，我們需要做的就是：監(jiān)聽粘貼事件=>獲取剪貼板里的內(nèi)容=>發(fā)請求上傳
需要明白的是：
我們只能上傳截圖工具截的圖片(qq截圖、微信截圖等)，不能粘貼上傳系統(tǒng)里的圖片(從桌面上、硬盤里復制)，因為他們是存在完全不同的地方。
知悉paste event這個事件：當進行粘貼（右鍵paste/ctrl+v）操作時，該動作將觸發(fā)名為'paste'的剪貼板事件，這個事件的觸發(fā)是在剪貼板里的數(shù)據(jù)插入到目標元素之前。如果目標元素（光標所在位置）是可編輯的元素（設(shè)置了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>
