神馬？使用JS直接上傳並預覽貼上板的圖片？
阿新 • • 發佈：2019-12-05
（題圖：梵高-橄欖樹）
提出需求
因為工作原因，現在有一個需求就是需要使用者使用QQ或者微信複製一張截圖後，在div中直接貼上這張圖片，而不是採用上傳的方式。類似我們在使用QQ微信時直接貼上截圖的操作，這個要怎麼用js來實現呢？
實現原理
我們可以利用 Clipboard 這個介面API 來實現。
根據在MDN上的定義，Clipboard介面提供了一種讀寫作業系統剪貼簿的方式。這樣我們就可以獲取剪貼簿的內容，然後通過js插入到某個元素中。
具體Clipboard API的MDN連結如下： https://developer.mozilla.org/zh-CN/docs/Web/API/Clipboard
在瀏覽器相容性上面，可以看到大體上，常用的瀏覽器都支援，不過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; } } }
獲取到的是文字內容，可以直接在前端顯示。
如果是圖片的話，就需要上傳到伺服器，然後再在前端預覽，具體操作往下看。
上傳到伺服器
如果只是圖片，可以直接使用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>
可以直接複製上面demo程式碼進行實驗。
（啾咪 ^.< ）
