js ctrl+v实现图片粘贴
<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实现图片粘贴的更多相关文章
- 让input支持 ctrl v上传粘贴图片? 让input支持QQ截图或剪切板中的图像数据(Java实现保存)
原理:监听粘贴 → 获取粘贴内容 → 将内容上传 → 抓取后返回替换至input 我们在生产中用到的界面: 测试地址 http://sms.reyo.cn 用户名:aa 密码:123456 以下是PH ...
- KindEditor ctrl+v添加图片功能
原理: 监听粘贴事件(paste) 获取粘贴版数据,读取到图片数据流进行加载base64 传到后台服务端直接输出为图片文件保存后返回图片读取路径插入编辑器中 /** * 获取编辑器对象 */ wind ...
- Winform 使用热键功能实现Ctrl+C和Ctrl+V复制粘贴功能
当我们使用winform控件的时候,会发现这些控件(比如Label)不支持Ctrl+c 复制和Ctrl+v 快捷键复制粘贴功能,如果我们需要实现这个功能改怎么做呢? 1. 首先我们创建一个winfor ...
- js实现ctrl+v粘贴图片或是截图
浏览器环境:谷歌浏览器 1.ctrl+v粘贴图片都是监听paste时间实现的,复制的数据都存在clipboardData下面,虽然打印显示数据长度为0,但是还是可以获取数据的 2.打印clipboar ...
- js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)【转载】
我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=> ...
- js实现ctrl+v粘贴上传图片(兼容chrome,firefox,ie11)
背景 我们或多或少都使用过各式各样的富文本编辑器,其中有一个很方便功能,复制一张图片然后粘贴进文本框,这张图片就被上传了,那么这个方便的功能是如何实现的呢? 原理分析 提取操作:复制=>粘贴=& ...
- wangEditor实现ctrl+v粘贴word图片并上传
很多时候我们用一些管理系统的时候,发布新闻.公告等文字类信息时,希望能很快的将word里面的内容直接粘贴到富文本编辑器里面,然后发布出来.减少排版复杂的工作量. 下面是借用百度doc 来快速实现这个w ...
- kindeditor实现ctrl+v粘贴word图片并上传
Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...
- JS从剪切板里粘贴图片
功能需求:在网页中,Ctrl+V,把系统剪切板的图片(比如QQ截图)进行粘贴.显示.上传...,提高用户体验. 参考链接:https://ruby-china.org/topics/17266 git ...
随机推荐
- Java学习之路(书籍推荐)
一.基础类 1.<Thinking in java>(阅读2遍),入门第一位是建立正确的概念 2.<Core Java>这本书更贴近实践,更多API的介绍,同样,更新也更频繁. ...
- 训练指南 UVALive - 3126(DAG最小路径覆盖)
layout: post title: 训练指南 UVALive - 3126(DAG最小路径覆盖) author: "luowentaoaa" catalog: true mat ...
- DP(悬线法)【P1169】 [ZJOI2007]棋盘制作
顾z 你没有发现两个字里的blog都不一样嘛 qwq 题目描述-->p1169 棋盘制作 题目大意 给定一个01棋盘,求其中01交错的最大正方形与矩形. 解题思路: 动态规划---悬线法 以下内 ...
- Ze_Min Tree 主席树
前言 主席树,也叫可持久化线段树,所以他的本质是颗线段树,而可持久化指的是这颗线段树可以访问过去某个时刻线段树上的信息. 应用 应用的比较多的是查询区间的第k大值(因为其他的数据结构不好做). 实现 ...
- 【动态规划】【记忆化搜索】CODEVS 3415 最小和 CodeVS原创
f(l,r,i)表示第i段截第l位到第r位时,当前已经得到的价格最小值,可以很显然地发现,这个是没有后效性的,因为对之后截得的段都不造成影响. 注意水彩笔数=1的特判. 递归枚举当前段的r求解(∵l是 ...
- 【最大权闭合子图/最小割】BZOJ3438-小M的作物【待填】
[题目大意] 小M在MC里开辟了两块巨大的耕地A和B(你可以认为容量是无穷),现在,小P有n中作物的种子,每种作物的种子有1个(就是可以种一棵作物)(用1...n编号),现在,第i种作物种植在A中种植 ...
- Djanog|requirements.txt生成
Django | requirement.txt 生成 pip django 1 pip 通常我们熟悉使用的都是 pip, 这个工具确实方便项目管理依赖包.当想把当前项目依赖的包的名称和版本导入指 ...
- js创建json对象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- IO流--FileReader&&FileWriter
(一)FileReader (1)第一种读取方式 package com.songyan.fileReader; import java.io.FileNotFoundException; impor ...
- 高性能mysql读后感
1. 事务里的写操作,四种隔离级别,都会加排他锁. 2. 事务里的读操作,前三种隔离级别,不会加锁,最后一种隔离级别,会加共享锁. 3. 上面的写.读操作,都是隐式加的锁. 可以自己显示对读操作进行 ...