<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. hdu 1556 Color the ball (线段树+代码详解)

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) T ...

  2. ACID测试标准

    缩写ACID代表原子性(atomicity).一致性(consistency).孤立性(isolation).持久性(duration) 通过了ACID测试的事物在多线程.并行处理或多用户环境中就是安 ...

  3. ansible 循环register

    在有循环的task中使用register,register保存的是一个列表,整个属性为results results 是一个单个循环返回的结果的列表 - debug: msg="{{ ite ...

  4. MyEclipse CI 2018.9.0正式发布（附下载）

    MyEclipse线上特惠,在线立享专属折扣!火热开启中>> 此MyEclipse版本增加了对较新的Wildfly服务器的支持,修复了与PDT等第三方工具的兼容性,并在IDE中包含了许多错 ...

  5. SharePoint 2013的100个新功能之网站管理（一）

    一:设置盘 网站操作现在被替换为新的(设置)盘子.一些新的操作像添加一个应用.添加一个页面或设计管理器被添加而像创建网站则从菜单中移除了. 二:移除以其他用户身份登录 在SharePoint 2013 ...

  6. jQuery trigger()以及注意事项

    trigger() 方法触发被选元素的指定事件类型.例如: $('#pcId').trigger("change") ;//触发id为“pcId”的select的 change事件 ...

  7. 漂亮的各种弹出框 sweet alert

    Sweet Alert 是一个替代传统的 Alert 的提示效果.SweetAlert 自动居中对齐在页面中央,不管您使用的是台式电脑,手机或平板电脑看起来效果都很棒. 还带下拉 几种 动画效果 弹窗 ...

  8. sparksql与hive整合

    参考文献: http://blog.csdn.net/stark_summer/article/details/48443147 hive配置 编辑 $HIVE_HOME/conf/Hive-site ...

  9. linux-*.filetype.bz2 unzip

    how to unzip *.bz2 file? wget http://dlib.net/files/shape_predictor_68_face_landmarks.dat.bz2 unzip ...

  10. DoTween可视化编程用法详解

    DoTween可视化编辑 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) Chinar -- 心分享.心创新 ...