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 ...
随机推荐
- TP5动态路由配置好了但是报错was not found on this server的原因以及解决方法
问题:The requested URL /xxxx.html was not found on this server 原因:apache的重写未开启,开启重写后,问题解决, 方法如下: apach ...
- 软件测试 → 第二章 基础-> 软件缺陷与缺陷管理
一.缺陷定义与分类 1.1.软件缺陷 定义:在软件工程整个生命周期中任何背离需求.无法正确完成用户所要求的功能的问题,包括存在于组件.设备.或系统软件中因异常条件不支持而导致系统失败等都属于缺陷. 从 ...
- spring security四种实现方式
spring security四种实现方式 spring(20) > 目录(?)[+] 最简单配置spring-securityxml实现1 实现UserDetailsService 实现动态过 ...
- jmeter的关联-正则表达式的应用
LoadRunnner中的关联为web_reg_save_param,查找左右边界,下次请求的时候会用到上次请求服务器返回的数据,那么我们把符合左右边界的数据保存下来,以便下次请求的时候用到. jme ...
- 【C++】关于map的遍历 删除
int main(int argc, char* argv[]) { map<string, string> mapData; mapData["a"] = " ...
- laravle 事务
DB::beginTransaction(); try{ $name = 'abc'; $result1 = Test::create(['name'=>$name]); ...
- working copy is not up-to-date
解决方法: 在相应文件上,单击选择team,然后选择先更新,然后再提交.这样就好了.
- Nacos 发布 1.0.0 GA 版本，可大规模投入到生产环境
经过 3 个 RC 版本的社区体验之后,Nacos 正式发布 1.0.0 GA 版本,在架构.功能和 API 设计上进行了全方位的重构和升级. 1.0.0 版本的发布标志着 Nacos 已经可以大规模 ...
- ajax封装最后形态
function obj1(obj) { obj.t = new Date().getTime(); var res = []; for (var key in obj) //url中不能出现中文 r ...
- UVa 10520【递推 搜索】
UVa 10520 哇!简直恶心的递推,生推了半天..感觉题不难,但是恶心,不推出来又难受..一不小心还A了[]~(￣▽￣)~*,AC的猝不及防... 先递推求出f[i][1](1<=i< ...