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 ...
- 初探uni-app
第一步:下载 第二步:安装 第三步:创建项目 第四步:项目目录 项目运行 项目效果为 打包为原生App(云端) 运行打包 使用vue 效果如下,并不好看 使用代码如下 未完,待续.... 就是对着官网 ...
- Haskell 学习
truncate pi -- 表示截断, 此处结果为 3 haskell中的touple是可变的,而python中是不可变的 lines函数: lines :: String -> [Strin ...
- 下载安装APK(兼容Android7.0)
我们使用手机的时候经常会看到应用程序提示升级,大部分应用内部都需要实现升级提醒和应用程序文件(APK文件)下载. 一般写法都差不多,比如在启动app的时候,通过api接口获得服务器最新的版本号,然后和 ...
- java memory allocation（转）
Java的运行时数据存储机制 Java程序在运行时需要为一系列的值或者对象分配内存,这些值都存在什么地方?用什么样的数据结构存储?这些数据结构有什么特点?本文试图说明此命题的皮毛之皮毛. 概念 对 ...
- docker--docker基本命令使用及发布镜像
docker镜像可以完全看作一台全新的电脑使用,无论什么镜像都是对某一东西进行了配置,然后打包后可以快速移植到需要的地方直接使用 省去复杂的配置工作 比如java web项目部署,如果是新部署,需要装 ...
- objectarx之遍历当前模型空间中的所有实体，并对每个实体进行炸开
//炸开void BomEntity(){ AcDbBlockTable *pBlkTbl; acdbHostApplicationServices()->workingDatabase()-& ...
- String字符串的比较 Day15
package com.sxt.review; /* * String字符串的比较 * ==和equals() * 总结:比较String内容时用equals()方法 */ public class ...
- 2019-8-31-dotnet-控制台-Hangfire-后台定时任务
title author date CreateTime categories dotnet 控制台 Hangfire 后台定时任务 lindexi 2019-08-31 16:55:58 +0800 ...
- idea建立maven聚合项目 标签： mavenidea 2017-01-08 15:33 2477人阅读 评论(30)
上篇文章写了如何用idea建立maven项目,idea建立maven聚合项目我感觉不如eclipse方便,不过并不是没有办法,下面写一下这个小教程. 建立maven project 建立maven p ...