一、最近有需求需要复制图片（Ctrl+C）到浏览器进行粘贴（Ctrl+V）然后进行粘贴的内容上传到服务器，因以前上传文件都是通过插件来进行实现，所以并没有做过多的学习，以下代码是基于其他网友文章中提供的内容，主要代码也已经做了部分的注释，如果不满足需求，大可以在主要的API进行拓展。
二、主要功能
- 获取系统粘贴板的内容
- 获取系统粘贴板内的容类型
- 获取系统粘贴板的内容来源
二、
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>JS复制+粘贴到浏览器功能</title>
<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
</head>
<body>
<img src='' class='imgView'/>
<script>
//只兼容最新浏览器
document.addEventListener('paste', function(event) {
var isChrome = false;
//not for ie11 某些chrome版本使用的是event.originalEvent
if(event.clipboardData || 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对象，看看后台程序能否解析）
$('.imgView').attr('src',base64_str)
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;
}
}
$('.imgView').attr('src',src_str)
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;
}
}
$('.imgView').attr('src',src_str)
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', 'http://www.google/com');
xhr.onload = function() {
if(xhr.readyState === 4) {
if(xhr.status === 200) {
var data = JSON.parse(xhr.responseText),
} else {
console.log(xhr.statusText);
}
};
};
xhr.onerror = function(e) {
console.log(xhr.statusText);
}
return;
var data = {
img:file
}
xhr.send(JSON.stringify(data));
}
</script>
</body>
</html>
*经测试，除了IE不兼容之外，其他浏览器测试能够正常使用
#因本人疏忽，导致原文的内容地址丢失，如有不当，可联系本人进行文章删除
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
