js粘贴图片(可以显示或上传)仅支持IE11,chrome,firefox
项目中如果想支持粘贴截图上传图片,或者粘贴截图显示到某个位置,可以用这段代码,支持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