从剪贴板Firefox获取粘贴图像

Question

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

根据我的阅读,自版本13以来的Firefox(我认为)不允许JavaScript访问剪贴板,并且event.clipboard不存在于剪贴板中.我知道它可以做到,因为Gmail和雅虎甚至在Firefox中也是如此.

我只是希望它无论如何都可以工作,使用jQuery,JavaScript,HTML5,只要它在最新的Firefox中工作就没关系.(虽然没有Flash).

Answer 1

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

我继续进行四重检查,确认这在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中或在提取的字符串上完成.

在实际情况下,您可能希望在之前保存选择,然后将其恢复(在contentEditable <div>上设置光标位置).然后,您可以在用户启动粘贴操作时将粘贴的数据插入光标所在的位置.

PS这个代码,IE <= 8和jsfiddle的组合似乎不起作用,但它在非jsfiddle环境中的ie <= 8下工作.