码迷,mamicode.com
首页 > Web开发 > 详细

js粘贴图片并显示

时间:2019-11-05 13:32:19      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:情况   res   app   file   text   event   order   贴图   htm   

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粘贴图片并显示

标签:情况   res   app   file   text   event   order   贴图   htm   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!