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"

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