js粘贴图片（可以显示或上传）仅支持IE11,chrome,firefox

最新推荐文章于 2023-12-14 03:30:00 发布

canlynet

最新推荐文章于 2023-12-14 03:30:00 发布

阅读量732

点赞数

分类专栏： Javascript 文章标签：前端 javascript 操作系统 ViewUI

本文链接：https://blog.csdn.net/canlynet/article/details/84828608

版权

Javascript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

项目中如果想支持粘贴截图上传图片，或者粘贴截图显示到某个位置，可以用这段代码，支持IE11，chrome。

注意粘贴图片不支持mac os 中的safari，safari会弹窗提示：Oops: You are trying to paste an image in Safari, however we are unable to retieve its data. 不让粘贴图片。

2016-12-01 备注：发现在windows 7中安装了firefox新版测试，这段代码无法运行，所以，请看附件代码，利用paste.js支持图片粘贴，那个可以做到在IE11,chrome,firefox中运行！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>测试</title>
	<style type="text/css">
	#editor {width: 500px;height:300px; border: 1px solid black;cursor:text;}
	</style>
</head>
<body>
	<div id="editor" contentEditable="true">这里填写内容！</div>
	<script src="index.js"></script>
</body>
</html>

document.querySelector('#editor').onpaste = function(e) {
	//判断是否是粘贴图片				
	if (e.clipboardData && e.clipboardData.items && e.clipboardData.items[0].type.indexOf('image') > -1) {
		var that = this,
			reader = new FileReader(),
			file = e.clipboardData.items[0].getAsFile();
		reader.onload = function(e) {
			// this.result得到图片的base64 (可以用作即时显示)
			var img = '<img src="' + this.result + '" alt=""/>';
			insertAtCursor(that, img);
		}
		reader.readAsDataURL(file);
	}
};

function insertAtCursor(dom, html) {
	if (dom != document.activeElement) { // 如果dom没有获取到焦点，追加
		dom.innerHTML = dom.innerHTML + html;
		return;
	}
	var sel, range;
	if (window.getSelection) {
		// IE9 或 非IE浏览器
		sel = window.getSelection();
		if (sel.getRangeAt && sel.rangeCount) {
			range = sel.getRangeAt(0);
			range.deleteContents();
			// Range.createContextualFragment() would be useful here but is
			// non-standard and not supported in all browsers (IE9, for one)
			var el = document.createElement("div");
			el.innerHTML = html;
			var frag = document.createDocumentFragment(),
				node, lastNode;
			while ((node = el.firstChild)) {
				lastNode = frag.appendChild(node);
			}
			range.insertNode(frag);
			// Preserve the selection
			if (lastNode) {
				range = range.cloneRange();
				range.setStartAfter(lastNode);
				range.collapse(true);
				sel.removeAllRanges();
				sel.addRange(range);
			}
		}
	} else if (document.selection && document.selection.type != "Control") {
		// IE < 9
		document.selection.createRange().pasteHTML(html);
	}
}

js中用到了在DIV中的光标位置插入内容的函数：insertAtCursor。

jquery.js请自行补充。

因为上述代码在新版的firefox中无法支持，所以请看附件代码，利用paste.js支持粘贴图片。

paste.js项目地址：https://github.com/layerssss/paste.js