提问者:小点点

从剪贴板火狐获取粘贴的图像


我试图允许用户将图像粘贴到div中。问题是我需要它在Firefox中工作。

据我所知,火狐从第13版开始(我认为)不允许JavaScript访问剪贴板,并且其中不存在event.clipboard。我知道这是可以做到的,因为Gmail和雅虎甚至在火狐中也支持它。

我只想让它在任何可能的情况下工作,与jQuery、JavaScript、HTML5一起工作,只要它在最新的Firefox中工作就行了。(不过没有闪光灯)。


共1个答案

匿名用户

我使用了这个问题中的代码来实现我的跨浏览器粘贴...它适用于我测试过的所有浏览器(向下滚动查看实际的解决方案/代码)。需要注意的是,event.clipboardData在粘贴事件完成执行后立即过期。

我继续检查了Firefox版本19(我没有13个可用版本,但听起来这个问题是关于新版本中某个功能的降级)。

以下是引自尼科·伯恩斯的答案:

测试在IE6,FF 3.5,歌剧,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>