从剪贴板Firefox获取粘贴图像 [英] Get Pasted Image from Clipboard Firefox
问题描述
我试图让用户将图片粘贴到 div 中。问题是，我需要它在Firefox中工作。
从我读过的内容来看，自从版本13（我认为）以来，Firefox不允许JavaScript访问剪贴板， event.clipboard 不存在于其中。我知道这是可以做到的，因为Gmail和雅虎甚至允许它在Firefox。
我只是希望它在任何可能的工作，与jQuery，JavaScript，HTML5，它不要紧，只要它在最新的Firefox中工作。 （尽管没有Flash）。
我使用这个问题为我的跨浏览器粘贴实现..它适用于我测试过的所有浏览器（向下滚动实际的解决方案/代码）。应该注意的是，在粘贴事件完成执行后， event.clipboardData 立即失效。
我继续前进，四次检查，确实在Firefox 19版本中工作（我没有13可用，但听起来像这个问题是关于功能退化在更新的版本）。
下面是答案，引自 Nico Burns ：
解决方案
经过IE6 +，FF 3.5+，Opera，Chrome，Safari等近期版本的测试。
亦信范读范读亦作亦亦信息当中信息中的信息中中的范范信息上读亦范亦亦信息中范范上范亦中信息pre class =snippet-code-js lang-js prettyprint-override> function handlepaste（elem，e）{var savedcontent = elem.innerHTML; if（e& e.clipboardData& e.clipboardData.getData）{// Webkit - 从剪贴板获取数据，放入editdiv，清除，然后取消事件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（）; }返回false; } else {//其他 - 清空editdiv并允许浏览器粘贴内容，然后清理elem.innerHTML =; waitforpastedata（elem，savedcontent）;返回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; // ^^或者在这里通过dom（elem.childNodes或者elem.getElementsByTagName）循环elem.innerHTML = savedcontent; //根据收集的数据做任何事情; alert（pasteddata）;}
< div id = div'contenteditable ='true'onpaste ='handlepaste（this，event）'>粘贴< / div>
$ b
解释
onpaste 事件有 handlepaste 函数附加到它，并传递了两个参数：这个（即引用事件的元素）和<$
$ b $ > handlepaste function：
第一行简单地将可编辑div的内容保存到一个变量中，以便在最后恢复。
$ b
if 检查浏览器是否是webkit浏览器（chrome或safari），如果是可编辑的div的内容被粘贴的数据。然后取消该事件以防止webkit粘贴任何东西两次。这是因为webkit是尴尬的，并且不会粘贴任何东西，如果你只是清除div。
如果它不是一个webkit浏览器，那么它只是清除可编辑的div。
然后调用 waitforpastedata 函数
$信读范读范范范范范范程范范uringnow now now now now now now now now now now now now 54范范内预如/适读的范数信息不会马上出现，所以如果你直接调用 processpaste ，那么它就不会有任何数据要处理了。
它所做的是检查可编辑的div是否有任何内容，如果它调用 processpaste ，否则它设置一个定时器来调用自己，并在20毫秒内再次检查。
$ b $ processpaste 函数：
这个函数将可编辑的div（现在是粘贴的数据）的innerHTML保存到一个变量，将可编辑的div的innerHTML恢复到它的原始值，提醒粘贴的数据。显然，在真实的使用场景中，您可能想要的不仅仅是提醒数据，您可以从这里执行任何您喜欢的操作。
您可能还想要通过某种数据清理过程运行粘贴的数据。这可以在它仍然处于可编辑div或提取的字符串中完成。
$ hr
以真实的结果你可能希望保存之前的选择，然后恢复它（设置光标在contentEditable< div> 上的位置）。然后，您可以在用户启动粘贴操作时，将粘贴的数据插入到光标所在的位置。
信息内数档中的数范范部预期或方范范范亦挥程预读信息中信息或信息范范或信息信息信息亦信息信息区亦信息信息亦信息信息中信息< = 8在非jsfiddle环境中。
I'm trying to allow the user to paste an image into a div. The problem is that I need it work in Firefox.
From what I've read, Firefox since version 13 (I think) doesn't allow JavaScript access to the clipboard, and event.clipboard doesn't exist in it. I know it can be done because Gmail and Yahoo alow it even in Firefox.
I just want it to work in anyway posible, be with jQuery, JavaScript, HTML5, it doesn't matter as long as it works in the latest Firefox. (No Flash though).
I used the code from this question for my cross-browser paste implementation.. it works in all browsers I have tested (scroll down for the actual solution/code). It should be noted that event.clipboardData expires immediately after the paste event has completed execution.
I went ahead and quadruple checked that this does work in Firefox version 19 (I don't have 13 available, but it sounds like this question was about degradation of a feature in newer versions).
Below is the answer, quoted from Nico Burns:
Solution
Tested in IE6+, FF 3.5+, recent-ish versions of 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>
Explanation
The onpaste event has the handlepaste function attached to it, and passed two arguments: this (i.e. a reference to the element that the event is attached to) and event which is the event object.
The handlepaste function:
The first line simply saves the content of the editable div to a variable so it can be restored again at the end.
The if checks whether the browser is an webkit browser (chrome or safari), and if it is it sets contents of the editable div to the data being pasted. It then cancels the event to prevent webkit pasting anything twice. This is because webkit is awkward, and won't paste anything if you simply clear the div.
If it is not a webkit browser then it simply clears the editable div.
It then calls the waitforpastedata function
The waitforpastedata function:
This is necessary because the pasted data doesn't appear straight away, so if you just called processpaste straight away then it wouldn't have any data to process.
What it does is check if the editable div has any content, if it does then calls processpaste, otherwise it sets a timer to call itself and check again in 20 milliseconds.
The processpaste function:
This function saved the innerHTML of the editable div (which is now the pasted data) to a variable, restores the innerHTML of the editable div back to its original value, and the alert the pasted data. Obviously in a real usage scenario you would probably want to something other than just alert data, you can do whatever you like with it from here.
You will probably also want to run the pasted data through some kind of data sanitising process. This can be done either while it is still in the editable div, or on the extracted string.
In a real sitution you would probably want to save the selection before, and restore it afterwards (Set cursor position on contentEditable <div>). You could then insert the pasted data at the position the cursor was in when the user initiated the paste action.
P.S. The combination of this code, IE <= 8 and jsfiddle doesn't seem to work, but it does work in ie <= 8 in a non-jsfiddle environment.
这篇关于从剪贴板Firefox获取粘贴图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
