[转][Chrome]浏览器粘贴行为

<html>
<head>
    <meta charset="UTF-8">
    <title>test chrome paste image</title>
    <!-- https://www.zhihu.com/question/20893119/answer/19452676 -->
<style>
    DIV#editable {
        width: 400px;
        height: 300px;
        border: 1px dashed blue;
    }
</style>
<script type="text/javascript">
    window.onload=function() {
    function paste_img(e) {
        if ( e.clipboardData.items ) {
            // google-chrome 
            //alert('support clipboardData.items(chrome ...)');
            var ele = e.clipboardData.items
            for (var i = 0; i < ele.length; ++i) {
                if(ele[i].kind == 'string' && ele[i].type == 'text/plain') {
                    ele[i].getAsString(function(text){
                        console.log(text)
                    })
                }
                else if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) {
                    var blob = ele[i].getAsFile();
                    window.URL = window.URL || window.webkitURL;
                    var blobUrl = window.URL.createObjectURL(blob);
                    console.log(blobUrl);

                    var new_img= document.createElement('img');
                    new_img.setAttribute('src', blobUrl);
                    var new_img_intro = document.createElement('p');
                    new_img_intro.innerHTML = 'the pasted img url(open it in new tab): <br /><a target="_blank" href="' + blobUrl + '">' + blobUrl + '</a>';

                    document.getElementById('editable').appendChild(new_img);
                    document.getElementById('editable').appendChild(new_img_intro);
                }
            }
        } else {
            alert('non-chrome');
        }
    }
    document.getElementById('editable').onpaste=function(){paste_img(event);return false;};
}

</script>
</head>
<body >
    <h2>test image paste in browser</h2>
    <div id="non-editable" >
        <p>copy the following img, then paste it into the area below</p>
        <!--<img src="./128.png" />-->
    </div>
    <div id="editable" contenteditable="true" >
        <p>this is an editable div area</p>
        <p>paste the image into here.</p>
    </div>
</body>
</html>

本文来自：https://www.zhihu.com/question/20893119/answer/19452676

经测试，仅支持 Chrome 浏览器，可支持文字、图片、Excel 粘贴。

posted on 2018-01-12 14:34 z5337 阅读(766) 评论(0) 收藏举报