1.实现原理
利用html中 contenteditable 属性+JS判断
2.代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="editable" id="richedit" contenteditable>111111111</div>
<script>
//监听粘贴事件
document.querySelector('#richedit').addEventListener('paste', function (e) {
var cbd = e.clipboardData;
console.log(cbd)
var ua = window.navigator.userAgent;
if (!(cbd && cbd.items)) {
return;
}
//判断浏览器
if (cbd.items && cbd.items.length === 2 && cbd.items[0].kind === 'string' && cbd.items[1].kind === 'file' && cbd.types && cbd.types.length === 2 && cbd.types[0] === 'text/plain' && cbd.typesp[1] === 'Files' && ua.match(/Macintosh/i) && Number(ua.match(/Chrome\/(\d{2})/i)[1]) < 49) {
return;
}
//判断是图片渲染
for (var i = 0; i < cbd.items.length; i++) {
var item = cbd.items[i];
if (item.kind == 'file') {
var blob = item.getAsFile();
if (blob.size === 0) {
return;
}
var reader = new FileReader();
var imgs = new Image();
imgs.file = blob;
reader.onload = (function (aImg) {
return function (e) {
aImg.src = e.target.result;
}
})(imgs)
reader.readAsDataURL(blob)
document.querySelector('#richedit').appendChild(imgs)
}
}
}, false)
</script>
</body>
</html>3.参考
http://tieba.baidu.com/p/6023597119?pid=123901122159&cid=0#123901122159