js粘贴图片并显示
var fromDa;
$(function(){
document.getElementById('app').addEventListener('paste', function(e) {
if(e.target.tagName=="TEXTAREA"){//防止文本粘贴时触发粘贴图片
return
}else if(e.target.tagName=="INPUT"){//防止input粘贴时触发粘贴图片
return
}
if(e.clipboardData) {
e.preventDefault(); //不让图片在火狐浏览器中展示
for(var i = 0; i < e.clipboardData.items.length; i++) {
var c = e.clipboardData.items[i];
var f = c.getAsFile();
// console.log(c)
var reader = new FileReader();
reader.onload = function(e) {
// console.log(e)
amount.elimgSrc = reader.result
fromDa = new FormData();
fromDa.append('file', f);
// console.log(fromDa.get('file'))
}
reader.readAsDataURL(f);
}
}
});
});
html部分：
<div contenteditable="true" id="tankBox" style="width: 130px;height: 97px;border:1px solid #DCDFE6;border-radius: 4px;" @keydown.delete.prevent="keypress">
<img :src="elimgSrc != '' ? elimgSrc : ''" id="imgSrc" style="max-width: 130px;max-height: 97px;" id="tankBoximgSrc" />
</div>
<button type="button" class="btn btn-success" style="font-size: 12px;" @click="pasteUploadcontent()">粘贴图片识别</button>
<button type="button" class="btn btn-success" style="font-size: 12px;" @click="pasteFun()">取消</button>
这个文本中，用的是vue.js通过虚拟dom渲染；可根据具体情况转换；主要用到的是contenteditable="true"
------------------------------------------------------------------------------------------------------------------------------------------------------------原生粘贴图片--------------------------------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE HTML>
<html lang="en-US"> <head>
<meta charset="UTF-8">
<title>利用 clipboardData 在网页中实现截屏粘贴的功能</title>
<style type="text/css">
#box {
width: 200px;
height: 200px;
border: 1px solid #ddd;
}
</style>
</head> <body> <h1>利用 clipboardData 在网页中实现截屏粘贴的功能</h1>
<hr />
<div>
<textarea cols="10" rows="5" id="testInput"></textarea>
</div>
<script type="text/javascript">
(function() {
var imgReader = function(item) {
var blob = item.getAsFile(),
reader = new FileReader();
// 读取文件后将其显示在网页中
reader.onload = function(e) {
var img = new Image(); img.src = e.target.result;
document.body.appendChild(img);
};
// 读取文件
reader.readAsDataURL(blob);
};
document.getElementById('testInput').addEventListener('paste', function(e) {
// 添加到事件对象中的访问系统剪贴板的接口
var clipboardData = e.clipboardData,
i = 0,
items, item, types; if(clipboardData) {
items = clipboardData.items;
if(!items) {
return;
}
item = items[0];
// 保存在剪贴板中的数据类型
types = clipboardData.types || [];
for(; i < types.length; i++) {
if(types[i] === 'Files') {
item = items[i];
break;
}
}
// 判断是否为图片数据
if(item && item.kind === 'file' && item.type.match(/^image\//i)) {
imgReader(item);
}
}
});
})(); document.addEventListener('paste', function(event) {
console.log(event) var isChrome = false;
if(event.clipboardData || event.originalEvent) { //not for ie11 某些chrome版本使用的是event.originalEvent
var clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
if(clipboardData.items) { // for chrome
var items = clipboardData.items,
len = items.length,
blob = null;
isChrome = true; //items.length比较有意思，初步判断是根据mime类型来的，即有几种mime类型，长度就是几（待验证）
//如果粘贴纯文本，那么len=1，如果粘贴网页图片，len=2, items[0].type = 'text/plain', items[1].type = 'image/*'
//如果使用截图工具粘贴图片，len=1, items[0].type = 'image/png'
//如果粘贴纯文本+HTML，len=2, items[0].type = 'text/plain', items[1].type = 'text/html'
// console.log('len:' + len);
// console.log(items[0]);
// console.log(items[1]);
// console.log( 'items[0] kind:', items[0].kind );
// console.log( 'items[0] MIME type:', items[0].type );
// console.log( 'items[1] kind:', items[1].kind );
// console.log( 'items[1] MIME type:', items[1].type );
//阻止默认行为即不让剪贴板内容在div中显示出来
event.preventDefault(); //在items里找粘贴的image,据上面分析,需要循环
for(var i = 0; i < len; i++) {
if(items[i].type.indexOf("image") !== -1) { // console.log(items[i]);
// console.log( typeof (items[i]));
//getAsFile() 此方法只是living standard firefox ie11 并不支持
blob = items[i].getAsFile();
}
}
if(blob !== null) {
var reader = new FileReader();
reader.onload = function(event) { // event.target.result 即为图片的Base64编码字符串
var base64_str = event.target.result //可以在这里写上传逻辑 直接将base64编码的字符串上传（可以尝试传入blob对象，看看后台程序能否解析）
uploadImgFromPaste(base64_str, 'paste', isChrome);
}
reader.readAsDataURL(blob);
}
} else { //for firefox
setTimeout(function() { //设置setTimeout的原因是为了保证图片先插入到div里，然后去获取值
var imgList = document.querySelectorAll('#tar_box img'),
len = imgList.length,
src_str = '',
i;
for(i = 0; i < len; i++) {
if(imgList[i].className !== 'my_img') { //如果是截图那么src_str就是base64 如果是复制的其他网页图片那么src_str就是此图片在别人服务器的地址
src_str = imgList[i].src;
}
}
uploadImgFromPaste(src_str, 'paste', isChrome);
}, 1);
}
} else { //for ie11
setTimeout(function() {
var imgList = document.querySelectorAll('#tar_box img'),
len = imgList.length,
src_str = '',
i;
for(i = 0; i < len; i++) {
if(imgList[i].className !== 'my_img') {
src_str = imgList[i].src;
}
}
uploadImgFromPaste(src_str, 'paste', isChrome);
}, 1);
}
})
function uploadImgFromPaste(file, type, isChrome) {
var formData = new FormData();
formData.append('image', file);
formData.append('submission-type', type);
var xhr = new XMLHttpRequest();
xhr.open('POST', '/upload_image_by_paste');
xhr.onload = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
var data = JSON.parse(xhr.responseText),
tarBox = document.getElementById('tar_box');
if(isChrome) {
var img = document.createElement('img');
img.className = 'my_img';
img.src = data.store_path;
tarBox.appendChild(img);
} else {
var imgList = document.querySelectorAll('#tar_box img'),
len = imgList.length,
i;
for(i = 0; i < len; i++) {
if(imgList[i].className !== 'my_img') {
imgList[i].className = 'my_img';
imgList[i].src = data.store_path;
}
}
}
} else {
console.log(xhr.statusText);
}
};
};
xhr.onerror = function(e) {
console.log(xhr.statusText);
}
xhr.send(formData);
}
</script>
</body> </html>
js粘贴图片并显示的更多相关文章
- js实现图片预显示
html页面代码 <div id="localImag" style="display:none"><img id="previe ...
- 关于word粘贴图片无法显示的原因
今天在进行word文档粘贴图片编辑操作的时候,老是无法完整的显示图片.或者干脆就不显示图片,以为是qq截图的图片格式无法粘贴到word文档里面,用Photoshop更改图片的格式仍然无法显示(将png ...
- js判断图片是否显示
function getDefaultImg() { //添加判断图片是否存在操作 var $defaultImgPathObj = $('input[name=defaultImgPath]'); ...
- ueditor编辑文章时候，复制粘贴内容，原来的图片不能显示
ueditor编辑文章时候.当现有文章有图片的时候, 再复制粘贴文本进去的时候.里面的图片就不能显示了, 编辑器查看文章Html代码,图片路径显示为:src="http://localhos ...
- ie6,7下js动态加载图片不显示错误
ie6,7下js动态加载图片不显示错误 先描述一下出现这种匪夷所思bug的背景: 我在页面加载的时候加载一堆小缩略图,<a href="javascript:void(0);" ...
- 【js】【图片显示】js控制html页面显示图片方式
js控制html页面显示图片方式,只需要引入“jquery-1.11.2.min.js” js: /* 引用 <script src="jquery-1.11.2.min.js&quo ...
- js读取本地图片并显示
抄自 http://blog.csdn.net/qiulei_21/article/details/52785191 js读取本地图片并显示 第一种方法比较好 版权声明:本文为博主原创文章,未经博主允 ...
- 在word中粘贴的图片为什么显示不完整
一.背景 整理系统测试说明文档,截得图片粘贴到word中显示不完整. 二.错误问题 问题:在word中粘贴的图片为什么显示不完整,如图所示: 三.分析问题: 原因是原来设置的行间距是固定值,图片也作一 ...
- js实现图片粘贴上传到服务器并展示
最近看了一些有关于js实现图片粘贴上传的demo,实现如下: (这里只能检测到截图粘贴和图片右键复制之后粘贴) demo1: document.addEventListener('paste', fu ...
随机推荐
- 使用C3P0和DBUtils
1.导包 2.配置c3p0-config.xml <?xml version="1.0" encoding="UTF-8"?> <c3p0-c ...
- NOIP模拟 17.8.15
NOIP模拟17.8.15 A 债务文件名 输入文件 输出文件 时间限制 空间限制debt.pas/c/cpp debt.in debt.out 1s 128MB[题目描述]小 G 有一群好朋友,他们 ...
- Linux之软件包安装管理
软件包分类: 源码包:脚本安装包(源C代码) 二进制包(rpm包,系统默认包) 源码包 1.源码包优点 开源,如果有足够的能力,完全可以修改源代码 可以自己选择所需要安装的功能 软件是编译安装,所以更 ...
- BMDP为常规的统计分析提供了大量的完备的函数系统，如：方差分析（ANOVA）、回归分析（Regression）、非参数分析（Nonparametric Analysis）、时间序列（Times Series）等等。此外，BMDP特别擅于进行出色的生存分析（Survival Analysis ）。许多年来，一大批世界范围内顶级的统计学家都曾今参与过BMDP的开发工作。这不仅使得BMDP的权威性得到
BMDP是Bio Medical Data Processing的缩写,是世界级的统计工具软件,至今已经有40多年的历史.目前在国际上与SAS.SPSS被并称为三大统计软件包.BMDP是一个大 ...
- oracle如何加固你的数据库
要注意以下方面 1. 修改sys, system的口令. 2. Lock,修改,删除默认用户: dbsnmp,ctxsys等. 3. 把REMOTE_OS_AUTHENT改成False,防止远程机器直 ...
- 阿里云应用高可用 AHAS 正式商用，可一键提升云上应用可用性
在分布式架构环境下,服务间的依赖日益复杂,可能没有人能说清单个故障对整个系统的影响,构建一个高可用的分布式系统面临着很大挑战. 7月17日,阿里云应用高可用服务AHAS 正式商用,包含架构感知.流控降 ...
- 封装:PDO与MySQL之间的无缝切换
以下的例子是将MySQL和PDO封装好,再无缝切换: 文件目录: config.php文件: <?php return array( // 数据库配置 'DB' => array( ' ...
- 三、python-json、正则
一.json 1.导入模块 import json 2.常用方法 dumps:序列化,把一个Python对象转化成json字符串 loads:反序列化,把json字符串转化成python dump ...
- Go语言开发教程
Go语言简述 兴起:2009年Gogle发布的第二款开源编程语言 特征: 语法简单:语法标准比较严格,适合开发人员短时间高效的服务端开发. 并发模型:Goroutine是Go最显著的特征,使用类协程的 ...
- cocos2dx 2.2.3在Windows 7 64bit上搭建开发环境
最终弄完了cocos2dx 2.2.3在windows 7 64bit上的环境搭建,过程比較揪心.揪心的主要原因还是引擎的开发人员和官方文档的写作者都是偏爱MAC OS的,所以官方文档中的安装方法是以 ...