<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. tensorflow 模型保存后的加载路径问题

    import tensorflow as tf #保存模型 saver = tf.train.Saver() saver.save(sess, "e://code//python//test ...

  2. C中预编译详解

    预处理过程扫描源代码,对其进行初步的转换,产生新的源代码提供给编译器.可见预处理过程先于编译器对源代码进行处理.在C 语言中,并没有任何内在的机制来完成如下一些功能:在编译时包含其他源文件.定义宏.根 ...

  3. L1-010 比较大小

    本题要求将输入的任意3个整数从小到大输出. 输入格式: 输入在一行中给出3个整数,其间以空格分隔. 输出格式: 在一行中将3个整数从小到大输出,其间以“->”相连. 输入样例: 4 2 8 输出 ...

  4. mybatis之sql执行有数据但返回结果为null

    最近在使用mybatis查询数据库时,发现在pl/sql中单独执行sql时结果是有值的,但是在程序中拿到的却是null,相关配置如下: (1) <resultMap type="mon ...

  5. Java不同场景oom错误探究及解决办法

    1.OOM for Heap=>java.lang.OutOfMemoryError: Java heap space 分  析 此OOM是由于JVM中heap的最大值不满足需要,将设置heap ...

  6. 分析苹果代充产业链 汇率差+退款造就三线城市千万富翁‍_中新游戏研究_Joynews中新游戏

    分析苹果代充产业链 汇率差+退款造就三线城市千万富翁‍_中新游戏研究_Joynews中新游戏 CNG:近日有媒体曝出8月22日这一天,有一家淘宝店卖出了351张面值4000南非南特的App Store ...

  7. matplotlib.pyplot中add_subplot方法参数111的含义

    下述代码若要运行,得在安装Python之外安装matplotlib.numpy.scipy.six等库,专门来看这篇小贴的朋友应该知道这些库. 参数331的意思是:将画布分割成3行3列,图像画在从左到 ...

  8. 【leetcode】2-AddTwoNums

    problem: Add Two Numbers 需要学习的是单向链表的基础使用:

  9. liunx网络基本命令

    1.ifconfig 查看本机的ip或者网关 更改本机的ip地址 2.sudo reboot    重启 跟 sudo shutdown -r new  是一样的意思

  10. Ajax和SpringMVC之间JSON交互

    Ajax和SpringMVC之间的json数据传输有两种方式: 1.直接传输Json对象 2.将Json序列化成json字符串 1.直接传输Json对象 前端Ajax $(document).read ...