从剪贴板Firefox获取粘贴的图像
我正在尝试允许用户将图像粘贴到div中。问题是我需要它在Firefox中工作。
据我所知，火狐从13版开始(我认为)不允许JavaScript访问剪贴板，并且event.clipboard不存在于其中。我知道这是可以做到的，因为Gmail和Yahoo甚至在Firefox中都允许这样做。
我只是希望它在任何可能的情况下都能工作，在jQuery，JavaScript，HTML5上工作，只要它能在最新的火狐上工作就没关系了。(不过没有Flash )。
回答 1
Stack Overflow用户
发布于 2013-03-09 06:50:38
我使用来自this question的代码来实现我的跨浏览器粘贴。它可以在我测试过的所有浏览器中工作(向下滚动查看实际的解决方案/代码)。应该注意的是，event.clipboardData在paste事件完成执行后立即过期。
我继续进行了四次检查，确认这在Firefox版本19中是有效的(我没有13个可用的版本，但听起来这个问题是关于新版本中一个功能的降级)。
以下是引用自Nico Burns的答案
解决方案
在IE6+、FF 3.5+、最新版本的Opera、Chrome、Safari上进行测试。
function handlepaste (elem, e) {
var savedcontent = elem.innerHTML;
if (e && e.clipboardData && e.clipboardData.getData) {// Webkit - get data from clipboard, put into editdiv, cleanup, then cancel event
if (/text\/html/.test(e.clipboardData.types)) {
elem.innerHTML = e.clipboardData.getData('text/html');
}
else if (/text\/plain/.test(e.clipboardData.types)) {
elem.innerHTML = e.clipboardData.getData('text/plain');
}
else {
elem.innerHTML = "";
}
waitforpastedata(elem, savedcontent);
if (e.preventDefault) {
e.stopPropagation();
e.preventDefault();
}
return false;
}
else {// Everything else - empty editdiv and allow browser to paste content into it, then cleanup
elem.innerHTML = "";
waitforpastedata(elem, savedcontent);
return true;
}
}
function waitforpastedata (elem, savedcontent) {
if (elem.childNodes && elem.childNodes.length > 0) {
processpaste(elem, savedcontent);
}
else {
that = {
e: elem,
s: savedcontent
}
that.callself = function () {
waitforpastedata(that.e, that.s)
}
setTimeout(that.callself,20);
}
}
function processpaste (elem, savedcontent) {
pasteddata = elem.innerHTML;
//^^Alternatively loop through dom (elem.childNodes or elem.getElementsByTagName) here
elem.innerHTML = savedcontent;
// Do whatever with gathered data;
alert(pasteddata);
}<div id='div' contenteditable='true' onpaste='handlepaste(this, event)'>Paste</div>
解释
onpaste事件附加了handlepaste函数，并传递了两个参数：this (即对事件附加到的元素的引用)和event (事件对象)。
handlepaste函数：
第一行只是将可编辑div的内容保存到一个变量中，以便在结束时可以再次恢复。
if检查浏览器是否为webkit浏览器(chrome或safari)，如果是，则将可编辑div的内容设置为要粘贴的数据。然后，它会取消该事件，以防止webkit粘贴任何内容两次。这是因为webkit很笨拙，如果您只是清除div，就不会粘贴任何内容。
如果它不是webkit浏览器，那么它只需清除可编辑的div。
然后，它调用waitforpastedata函数
waitforpastedata函数：
这是必要的，因为粘贴的数据不会立即出现，所以如果您只是直接调用processpaste，那么它就不会有任何数据需要处理。
它所做的是检查可编辑的div是否有任何内容，如果有，则调用processpaste，否则它会设置一个计时器来调用自己，并在20毫秒后再次检查。
processpaste函数：
此函数将可编辑div (现在是粘贴的数据)的innerHTML保存到一个变量中，将可编辑div的innerHTML恢复为其原始值，并对粘贴的数据发出警报。显然，在实际使用场景中，您可能想要的不仅仅是警报数据，您可以从这里使用它做任何您想做的事情。
您可能还希望通过某种数据清理过程来运行粘贴的数据。这可以在它仍然在可编辑div中时完成，或者在提取的字符串上完成。
在实际情况中，您可能希望在保存选择之前保存它，然后再恢复它(Set cursor position on contentEditable )。然后，您可以在用户启动粘贴操作时光标所在的位置插入粘贴的数据。
附注:此代码、IE <= 8和jsfiddle的组合似乎不起作用，但它确实可以在ie <= 8的非jsfiddle环境中工作。
https://stackoverflow.com/questions/15253468
复制相似问题