var fromDa; $(function(){ document.getElementById(‘app‘).addEventListener(‘paste‘, function(e) { if(e.target.tagName=="TEXTAREA"){//防止文本粘贴时触发粘贴图片 return }else if(e.target.tagName=="INPUT"){//防止input粘贴时触发粘贴图片 return } if(e.clipboardData) { e.preventDefault(); //不让图片在火狐浏览器中展示 for(var i = 0; i < e.clipboardData.items.length; i++) { var c = e.clipboardData.items[i]; var f = c.getAsFile(); // console.log(c) var reader = new FileReader(); reader.onload = function(e) { // console.log(e) amount.elimgSrc = reader.result fromDa = new FormData(); fromDa.append(‘file‘, f); // console.log(fromDa.get(‘file‘)) } reader.readAsDataURL(f); } } }); });

html部分：

<div contenteditable="true" id="tankBox" style="width: 130px;height: 97px;border:1px solid #DCDFE6;border-radius: 4px;" @keydown.delete.prevent="keypress"> <img :src="elimgSrc != ‘‘ ? elimgSrc : ‘‘" id="imgSrc" style="max-width: 130px;max-height: 97px;" id="tankBoximgSrc" /> </div> <button type="button" class="btn btn-success" style="font-size: 12px;" @click="pasteUploadcontent()">粘贴图片识别</button> <button type="button" class="btn btn-success" style="font-size: 12px;" @click="pasteFun()">取消</button>

这个文本中，用的是vue.js通过虚拟dom渲染；可根据具体情况转换；主要用到的是contenteditable="true"

js粘贴图片并显示

标签：

原文地址：https://www.cnblogs.com/weilizou/p/11797620.html