Js實現粘貼上傳圖片的原理及示例
我們或多或少都使用過各式各樣的富文本編輯器，其中有一個很方便功能，復制一張圖片然后粘貼進文本框，這張圖片就被上傳了，那么這個方便的功能是如何實現的呢？
原理分析：復制=>粘貼=>上傳
在這個操作過程中，我們需要做的就是：監聽粘貼事件=>獲取剪貼板里的內容=>發請求上傳
需要明白的是：
我們只能上傳截圖工具截的圖片(qq截圖、微信截圖等)，不能粘貼上傳系統里的圖片(從桌面上、硬盤里復制)，因為他們是存在完全不同的地方。
知悉paste event這個事件：當進行粘貼（右鍵paste/ctrl+v）操作時，該動作將觸發名為’paste’的剪貼板事件，這個事件的觸發是在剪貼板里的數據插入到目標元素之前。如果目標元素（光標所在位置）是可編輯的元素（設置了contenteditable屬性的div。textarea并不行），粘貼動作將把剪貼板里的數據，以最合適的格式，插入到目標元素里；如果目標元素不可編輯，則不會插入數據，但依然觸發paste event。數據在粘貼的過程中是只讀的。
監聽了paste事件，也知道了表現形式，接下來就是如何獲取數據了：
chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回調函數里獲取到剪貼板里圖片的base64編碼字符串（無論是截圖粘貼的還是網頁圖片復制粘貼的），ie11，firefox沒有這樣的api，不過依然有辦法可以獲取，因為數據已經表現在img的src里了，對于截圖粘貼的，直接取img的src屬性值（base64），對于網頁粘貼的，則把地址傳給后臺，然后根據地址down下來，存在自己的服務器，最后把新地址返回來交給前端展示就ok了。為了保持一致性便于管理，統一將所有情況（截圖、網頁）中的img的src屬性替換為自己存儲的地址。
完整例子：
<!DOCTYPE html><html><head> <meta charset='UTF-8'> <title>Js實現粘貼上傳圖片</title> <script src='http://www.aoyou183.cn/bcjs/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='http://www.aoyou183.cn/bcjs/ + result.data + ' width=’100’ height=’100’>'; $('#content_img').append(html);} else { console.log(result.message)} }});//阻止默認行為即不讓剪貼板內容在div中顯示出來e.preventDefault(); }} }); </script></body></html>
以上就是Js實現粘貼上傳圖片的原理及示例的詳細內容，更多關于JS 粘貼上傳圖片的資料請關注好吧啦網其它相關文章！
相關文章：
1. Intellij IDEA 2019 最新亂碼問題及解決必殺技(必看篇)2. JS+css3實現幻燈片輪播圖3. java實現圖形化界面計算器4. 《javascript設計模式》學習筆記三：Javascript面向對象程序設計單例模式原理與實現方法分析5. JS繪圖Flot如何實現動態可刷新曲線圖6. IntelliJ IDEA設置條件斷點的方法步驟7. 未來的J2EE主流應用框架：對比Spring和EJB38. ASP.NET MVC獲取多級類別組合下的產品9. 關于HTML5的img標簽10. 原生js XMLhttprequest請求onreadystatechange執行兩次的解決
網公網安備