<script>

// demo 程序将粘贴事件绑定到 document 上
document.addEventListener("paste", function (e) {
var cbd = e.clipboardData;
var ua = window.navigator.userAgent; // 如果是 Safari 直接 return
if ( !(e.clipboardData && e.clipboardData.items) ) {
return;
} // Mac平台下Chrome49版本以下 复制Finder中的文件的Bug Hack掉
if(cbd.items && cbd.items.length === && cbd.items[].kind === "string" && cbd.items[].kind === "file" &&
cbd.types && cbd.types.length === && cbd.types[] === "text/plain" && cbd.types[] === "Files" &&
ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{})/i)[]) < ){
return;
} for(var i = ; i < cbd.items.length; i++) {
var item = cbd.items[i];
if(item.kind == "file"){
var blob = item.getAsFile();
if (blob.size === ) {
return;
} var reader = new FileReader();
reader.onload=function(eve){
//判断文件是否读取完成
if(eve.target.readyState==FileReader.DONE)
{
//读取文件完成后,创建img标签来显示服务端传来的字节数//组
var img =document.createElement("img");
//读取文件完成后内容放在this===当前
//fileReader对象的result属性中,将该内容赋值img标签//浏览器就可以自动解析内容格式并且渲染在浏览器中
img.src=this.result;
//将标签添加到id为show的div中否则,即便是有img也看不见
document.body.appendChild(img);
}
};
reader.readAsDataURL(blob); }
}
}, false); </script>

js ctrl+v实现图片粘贴的更多相关文章

  1. 让input支持 ctrl v上传粘贴图片? 让input支持QQ截图或剪切板中的图像数据(Java实现保存)

    原理:监听粘贴 → 获取粘贴内容 → 将内容上传 → 抓取后返回替换至input 我们在生产中用到的界面: 测试地址 http://sms.reyo.cn 用户名:aa 密码:123456 以下是PH ...

  2. KindEditor ctrl+v添加图片功能

    原理: 监听粘贴事件(paste) 获取粘贴版数据,读取到图片数据流进行加载base64 传到后台服务端直接输出为图片文件保存后返回图片读取路径插入编辑器中 /** * 获取编辑器对象 */ wind ...

  3. Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能

    当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...

  4. js实现ctrl+v粘贴图片或是截图

    浏览器环境:谷歌浏览器 1.ctrl+v粘贴图片都是监听paste时间实现的,复制的数据都存在clipboardData下面,虽然打印显示数据长度为0,但是还是可以获取数据的 2.打印clipboar ...

  5. js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)【转载】

    我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=> ...

  6. js实现ctrl+v粘贴上传图片(兼容chrome,firefox,ie11)

    背景 我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=& ...

  7. wangEditor实现ctrl+v粘贴word图片并上传

    很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...

  8. kindeditor实现ctrl+v粘贴word图片并上传

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  9. JS从剪切板里粘贴图片

    功能需求:在网页中,Ctrl+V,把系统剪切板的图片(比如QQ截图)进行粘贴.显示.上传...,提高用户体验. 参考链接:https://ruby-china.org/topics/17266 git ...

随机推荐

  1. 如何修改wamp目录【成功】

    Wampserver安装好后,“www目录”默认为X:/wamp/www,(这里的X是盘符)也就是wampserver安装目录下的www文件夹.实际使用中,默认设置往往不是我们想要的,可能改成其他文件 ...

  2. HDU 1325 Is It A Tree?(并查集)

    题目大意: 给你两个节点,前者指向后者(可以认为前者是后者的父节点),然后让你判断是否是一棵树. 解题思路: 先说说这道题和小希的迷宫(HDU1272)那道题的区别,前者给出的两个点是有方向的,而后者 ...

  3. UVA12096 集合栈计算机(map和vector实现双射关系+集合的交并运算的STL)

    题目大意: 对于一个以集合为元素的栈,初始时栈为空. 输入的命令有如下几种: PUSH:将空集{}压栈 DUP:将栈顶元素复制一份压入栈中 UNION:先进行两次弹栈,将获得的集合A和B取并集,将结果 ...

  4. 搭建基于Ant+Jmeter+jenkins的自动负载测试框架的若干问题记录及解决

    1.关于构建时使用的默认build.xml问题  如图,如果构建脚本build.xml不在workspace根目录.或者说构建脚本不叫build.xml.那么需要在高级里设置Build File选项的 ...

  5. 【树状数组】bzoj2789 [Poi2012]Letters

    处理数组A,A[i]表示字符串a的第i个字符排序后应去的位置,队列可. 对于多次出现的字符,其在a中的顺序和在b中的顺序应该是一一对应的. #include<cstdio> #includ ...

  6. ListView控件(上)数据适配器:ListView绑定监听是SetOnItemClickListener

    (一) 1.效果图: 2.MainActivity.java package com.example.app5; import android.support.v7.app.AppCompatActi ...

  7. UTF8、UTF16、UTF16-LE、UTF16-BE、UTF32都是些什么?

    下述内容大部分引用自CSDN: Unicode 是 unicode.org 制定的编码标准,目前得到了绝大部分操作系统和编程语言的支持.unicode.org 官方对 Unicode 的定义是:Uni ...

  8. IOS之Block的应用-textFeild的回调应用

    Block的一点优点为可以省略回调函数,简化代码今天我就应用了以下. 以下是代码片段. _testTextField1=[[MyTextField alloc] init]; [self.view a ...

  9. 让你的saga更具有可伸缩性(Scaling NServiceBus Sagas)

    https://lostechies.com/jimmybogard/2013/03/26/scaling-nservicebus-sagas/ 当我们使用NServiceBus sagas (pro ...

  10. IDEA中添加类的创建者信息

    创建方法: 1. 使用快捷键(ctrl + alt + s),在弹出框中左边侧选择 Editor -> File and Code Templates,左边侧相应会更新 右边侧选择 Class, ...