<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 粘贴。

[转][Chrome]浏览器粘贴行为的更多相关文章

  1. Chrome浏览器快捷键大全（新加了其他一些浏览器的独有）

    官方快捷键文档: https://support.google.com/chrome/answer/157179?hl=zh-Hans&ref_topic=14676   浏览器标签页和窗口快 ...

  2. 让chrome浏览器变成在线编辑器

    在大部分人眼里,技术宅给人的印象是沉默寡言,总摸不透他心里想些什么,彼此都保持距离.作为半个程序员,我觉得真正的技术宅大部分时间都在找乐子,鼓捣各种想法,和大部分人的极客心理是一样的,程序员也还爱讲笑 ...

  3. Chrome浏览器的密码隐患

    谷歌浏览器的密码填充使得登陆账号很方便 但在你了解了Chrome的密码特性机制后,你该做点什么了 1.如何查看已保存的密码 Chrome 密码管理器的进入方式:右侧扳手图标→设置→显示高级设置→密码和 ...

  4. 详解googe Chrome浏览器（理论篇）

    开篇概述 1详解google Chrome浏览器,这个标题似乎抽象了一些,我想应该把它拆分成如下几个问题,也许会更加理解一些. 问题1:目前开发中,主选浏览器有Google Chrome,IE,Fir ...

  5. 详解Google Chrome浏览器（操作篇）（一）

    开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...

  6. Chrome浏览器读写系统剪切板

    IE浏览器支持直接读写剪切板内容: window.clipboardData.clearData(); window.clipboardData.setData('Text', 'abcd'); 但是 ...

  7. chrome浏览器下JavaScript实现clipboard时无法访问剪切板解决方案

    在用JavaScript实现某个简单的复制到剪切板功能的时候,会考虑一下浏览器兼容性,主要是重点在IE和FireFox,把这个两个浏览器搞定后,基本上其他浏览器也不用太操心了,Chrome也一样,没出 ...

  8. 浅谈Google Chrome浏览器（操作篇）（上）

    开篇概述 在上篇博客中详解Google Chrome浏览器(理论篇)一文中,主要讲解了Chrome 搜索引擎使用.Chrome安装和基本操作.Chrome 基本架构.多线程等原理性问题,这篇将重点讲解 ...

  9. 浅谈Google Chrome浏览器（理论篇）

    注解:各位读者,经博客园工作人员反馈,hosts涉及违规问题,我暂时屏蔽了最新hosts,若已经获取最新hosts的朋友们,注意保密,不要外传.给大家带来麻烦,对此非常抱歉!!! 开篇概述 1.详解g ...

随机推荐

  1. python 模块化管理，导入自己的模块（包）

    很多东西似懂非懂,或者当时看懂了,但是感觉不是很重要,经常不用,时间久了,也就变得似懂非懂了.今天被某度电话面试问道一个问题,就是模块倒入,其实我之前也是很仔细的研究过的,不过由于平时做的东西太简单, ...

  2. docker容器，镜像常用操作

    1.查看正在运行的容器 docker ps 查看所有容器 docker ps -a 2.查看容器日志 docker logs -f showdoc 3.删除所有容器 docker rm $(docke ...

  3. HDU 1518 Square（DFS）

    Problem Description Given a set of sticks of various lengths, is it possible to join them end-to-end ...

  4. Vue.js使用v-show和v-if的注意事项

    这篇文章一开始先对Vue.js中v-show和v-if两者的区别进行了简单的介绍,而后通过图文详细给大家介绍了Vue.js使用v-show和v-if注意的事项,有需要的朋友们可以参考借鉴,下面来一起看 ...

  5. google-protobuf安装详解

    前言 编译调试项目的过程中涉及到caffe的编译,提示没有安装protobuf的错误,本文详解protobuf的安装: 问题描述 解决步骤 1.查看google protobuf的github,没有直 ...

  6. 如何查看Window10系统隐藏文件夹

    1 . 打开我的电脑(此电脑)等等诸如此类的称呼 2 . 点击左上角的查看选项 3 . 选中“隐藏的选项” 4 . 完成

  7. vim 程序编辑器

    基本上vi共分为三种模式,分别是一般模式.编辑模式与指令列命令模式.vi 三种模式的相互关系如下图: vim的暂存档.救援回复与开启时的警告信息当我们在使用vim编辑时,vim会在与被编辑的档案的目录 ...

  8. HDU 5178：pairs（二分，lower_bound和upper_bound）

    pairs Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Subm ...

  9. HDU 1234：开门人和关门人

    开门人和关门人 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  10. 谨慎使用 FileInfo.Exists 实例方法，而是使用 File.Exists 静态方法替代

    如果你在代码中使用了 FileInfo.Exists 实例方法来判断一个文件是否存在,也许会发现此方法可能错误地判断来一个文件是否真的存在.这是一个坑. 本文将介绍坑的原因,并提供填坑的办法. 本文内 ...