<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. STL标准库-算法-常用算法

    技术在于交流.沟通,本文为博主原创文章转载请注明出处并保持作品的完整性 介绍11种STL标准库的算法,从这11种算法中总结一下算法的基本使用 1.accumulate() 累加 2.for_each( ...

  2. JavaScript权威指南——跳转语句

    前言:JavaScript中有一类语句叫做跳转语句.从名称就可以看出,它使得JavaScript的执行可以从一个位置跳转到另一个位置. return语句让解释器跳出循环体的执行,并提供本次调用的返回值 ...

  3. C# 历史曲线控件 基于时间的曲线控件 可交互的高级曲线控件 HslControls曲线控件使用教程

    本篇博客主要对 HslControls 中的曲线控件做一个详细的教程说明,大家可以根据下面的教程开发出高质量的曲线控件 Prepare 先从nuget下载到组件,然后就可以使用组件里的各种组件信息了. ...

  4. 1.2 Linux中的进程 --- fork、vfork、exec函数族、进程退出方式、守护进程等分析

    fork和vfork分析: 在fork还没有实现copy on write之前,Unix设计者很关心fork之后立即执行exec所造成的地址空间浪费,也就是拷贝进程地址空间时的效率问题,所以引入vfo ...

  5. ODBC 安装/使用/编程

    前言: 主要讲解ODBC API, 以mysql为例, 从配置到安装, 再到具体的编程, 以期对ODBC有个初步的认识. *) 下载mysql, 选择社区版mysql, 并安装 http://dev. ...

  6. 小程序api请求层封装（Loading全局配置）

    前言 小程序开发,没有vue中的axios那么好使,请求层的封装需要自己来搞. 当然请求层的配置少不了loading,这里索性也就将loading做一个配置,避免以后重复造轮子 请求封装 小程序中有封 ...

  7. DHT11

    主机开始发送信号:先拉低至少18ms,然后在拉高20~40us,然后DHT11响应, 拉低数据线40~50us,接着在拉高40~50us,之后再开始输出数据. 输出0是的时序:先12.14us低电平, ...

  8. stm32 继电器的配置

    你可以把继电器当成一个led来控制,只不过就是电路图不一样,但配置原理是一样的, 控制相对应的GPIO口,推挽输出,就行了,然后仿真一下就会发现哒哒哒的声音.

  9. CountDownLatch的简单理解

    CountDownLatch的概念 CountDownLatch是一个同步工具类,用来协调多个线程之间的同步,或者说起到线程之间的通信(而不是用作互斥的作用). CountDownLatch能够使一个 ...

  10. @ModelAttribute的用法