當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript实现黏贴上传图片功能
生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现黏贴上传图片功能
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
這周工作中，遇到了一個文章編輯的功能需求，需要支持圖片黏貼上傳并預(yù)覽，但是使用我們公司自己封裝的富文本編輯器，發(fā)現(xiàn)居然沒有黏貼上傳圖片的功能，額。。。心想，公司真是該有的功能沒有，不該有的功能一大堆。。。沒辦法，只能百度自己實(shí)現(xiàn)如何實(shí)現(xiàn)黏貼上傳圖片功能。
（1）html頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圖片黏貼上傳</title><style>#content {margin:0 auto;width:600px;height:600px;border:1px solid black;}</style> </head> <body><!-- 內(nèi)容區(qū)域 --><div id="content" contenteditable="true"></div> </body> </html>（2）添加監(jiān)聽事件
監(jiān)聽黏貼操作，即：ctrl+v的動作，js里面是paste事件。
<script>var content = document.getElemmentById("content")// 添加監(jiān)聽事件pastecontent.addEventListener('paste', function (e){// 具體操作}); </script>（3）從clipboardData中獲取黏貼板數(shù)據(jù)
監(jiān)聽paste事件，方法參數(shù)中的e里面有個clipboardData屬性，該屬性中包含了黏貼板數(shù)據(jù)，可以是字符串文本，也可以是圖片文件。
<script>var content = document.getElemmentById("content")// 添加監(jiān)聽事件pastecontent.addEventListener('paste', function (e){// 黏貼版沒有數(shù)據(jù),則直接結(jié)束if (!(e.clipboardData && e.clipboardData.items)) {return;}// 黏貼版數(shù)據(jù)項,是個數(shù)組var data = e.clipboardData.items;if (data && data.length) {// TODO 具體操作}e.preventDefault();}); </script>（4）判斷是文本還是圖片文件
if (data && data.length) {var item = data[0];// 判斷是文本還是圖片文件if (item.kind == 'string') {// 獲取文本內(nèi)容var text = event.clipboardData.getData('Text');// 設(shè)置到content中content.innerHTML = text;} else if (item.kind == 'file') {// 獲取文件var file = item.getAsFile();// 圖片插入div中var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (event) {var img = document.createElement("img");img.src = event.target.result;content.appendChild(img);}} }（5）完整代碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>圖片黏貼上傳</title><style>#content {margin:0 auto;width:600px;height:600px;border:1px solid black;}</style> </head> <body><!-- 內(nèi)容區(qū)域 --><div id="content" contenteditable="true"></div> <script>var content = document.getElemmentById("content")// 添加監(jiān)聽事件pastecontent.addEventListener('paste', function (e){// 黏貼版沒有數(shù)據(jù),則直接結(jié)束if (!(e.clipboardData && e.clipboardData.items)) {return;}// 黏貼版數(shù)據(jù)項,是個數(shù)組var data = e.clipboardData.items;if (data && data.length) {var item = data[0];// 判斷是文本還是圖片文件if (item.kind == 'string') {// 獲取文本內(nèi)容var text = event.clipboardData.getData('Text');// 設(shè)置到content中content.innerHTML = text;} else if (item.kind == 'file') {// 獲取文件var file = item.getAsFile();// 圖片插入div中var reader = new FileReader();reader.readAsDataURL(file);reader.onload = function (event) {var img = document.createElement("img");img.src = event.target.result;content.appendChild(img);}}}e.preventDefault();}); </script> </body> </html>（6）效果演示
?以上就是使用JavaScript實(shí)現(xiàn)圖片黏貼上傳并且預(yù)覽的功能。???????
總結(jié)
以上是生活随笔為你收集整理的JavaScript实现黏贴上传图片功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： iOS10 打开APP设置界面和WIFI
- 下一篇： zipline-benchmarks.p