First, the recent demand need to copy pictures (Ctrl + C) and paste into browser (Ctrl + V) and then paste the contents uploaded to the server, files are uploaded to achieve due to past through plug-ins, and there is not too much to do the study, the following code is based on the contents of other users provided in the article, the main code has also been made in the comments section, if the demand is not satisfied, they can be expanded in the main API.
Second, the main function
- The system acquires the content of clipboard
- Get the type of content in the system clipboard
- Acquiring content source system pasteboard
two,
The complete code
<!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>
* After testing, in addition to IE is not compatible, the other browser testing normal use
# Because I negligence, resulting in the loss of the original contents of the address, if inappropriate, I can contact the article be deleted