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 ...
随机推荐
- python深、浅拷贝
1.首先对于数字和字符串而言,深浅拷贝无实际意义,两者同时指向同一个内存地址. a = 123 print(id(a)) b = a print(id(b)) 495849744 495849744 ...
- Eclipse Jobs 和后台进程
Eclipse后台进程 1.主线程(Main thread) 一个Eclipse客户端只能跑一个进程,但却可以创建很多线程. 在Eclipse框架中,会用一个单线程去运行所有的代码指令,这个线程执行客 ...
- Thread class vs Runnnable interface（转）
http://developer.51cto.com/art/201203/321042.htm Thread(Runnable target) Allocates a new Thread obje ...
- Leetcode819.Most Common Word最常见的单词
给定一个段落 (paragraph) 和一个禁用单词列表 (banned).返回出现次数最多,同时不在禁用列表中的单词.题目保证至少有一个词不在禁用列表中,而且答案唯一. 禁用列表中的单词用小写字母表 ...
- 网络流24题 负载平衡（DCOJ8013）
题目描述 G 公司有 n nn 个沿铁路运输线环形排列的仓库,每个仓库存储的货物数量不等.如何用最少搬运量可以使 n nn 个仓库的库存数量相同.搬运货物时,只能在相邻的仓库之间搬运. 输入格式 文件 ...
- 在dva框架和create-react-app创建出来的框架中修饰器语法与按需加载引入antd分别配置
按需加载需要的包 babel-plugin-import 装饰器语法需要的包 @babel/plugin-proposal-decorators dva框架 将.webpackrc 改成. ...
- 【Linux】vim缩进配置 （转载）
1.安装vim,终端输入: wanpeng@ubuntu:~$ sudo apt-get install vim-full 2.终端输入,打开配置文件: wanpeng@ubuntu:~$ vim ~ ...
- part10.2-字符设备驱动模型
- ListOfOpenSourcePrograms
ListOfOpenSourcePrograms Contents Desktop Applications Communication Engineering Educational Financi ...
- @noi.ac - 493@ trade
目录 @description@ @solution@ @part - 1@ @part - 2@ @part - 3@ @part - 4@ @accepted code@ @details@ @d ...