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