js粘贴图片并显示
Posted 起啥名嘞
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js粘贴图片并显示相关的知识,希望对你有一定的参考价值。
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粘贴图片并显示的主要内容,如果未能解决你的问题,请参考以下文章