[英]How can I access pasted file in webkit browsers? (as Google Chrome)
It would be very convenient if one was able to paste images here, on Stack Exchange instead of meddling with a file dialog. 如果能够在Stack Exchange上粘贴图像而不是插入文件对话框,那将是非常方便的。 Similar feature was (is?) implemented here, but only for Webkit browsers . 这里实现了类似的功能(是?),但仅适用于Webkit浏览器 。
I was developing userscript that does that . 我正在开发那样做的用户脚本 。 Funny thing is that I never accomplished to get the file (which is different from raw image data) from clipboard in Webkit browsers, while in Firefox it works. 有趣的是,我从未完成从Webkit浏览器中的剪贴板获取文件 (与原始图像数据不同),而在Firefox中它可以工作。
Firefox solution: Firefox解决方案:
div.addEventListener('paste', function(event){
//I'm actually not sure what should event.originalEvent be. I copypasted this
var items = (event.clipboardData || event.originalEvent.clipboardData);
console.log("paste", items);
//Try to get a file and handle it as Blob/File
var files = items.items || items.files;
if(files.length>0) {
//Being lazy I just pick first file
var file = files[0];
//handle the File object
_this.processFile(file);
event.preventDefault();
event.cancelBubble = true;
return false;
}
});
Before Chrome doesn't have as nice documentation as Firefox has (I mean MDN), I tried to inspect what's going on. 在Chrome没有像Firefox那样好的文档(我的意思是MDN)之前,我试图检查发生了什么。 I copied a file and I pasted it in Google chrome (v39). 我复制了一个文件并将其粘贴到Google Chrome(v39)中。 This is what I get in the DataTransfer
object in the console: 这是我在控制台中的DataTransfer
对象中得到的:
For refference, here's the same event in Firefox: 对于参考,这是Firefox中的相同事件:
The other two arrays, items
and types
are not present in Firefox implementation. Firefox实现中不存在另外两个数组, items
和types
。 When I copy text or raw image data Chrome represents it as DataTransferItem
. 当我复制文本或原始图像数据时,Chrome将其表示为DataTransferItem
。 I figured out that it's best to ignore those: 我发现最好忽略这些:
//Being lazy I just pick first file
var file = files[0];
//GOOGLE CHROME
if(file.getAsFile) {
console.log("DataTransferItem:", file);
//HTML or text will be handled by contenteditable div
if(file.type!="text/plain" && file.type!="text/html") {
//handle the File object
_this.processFile(file.getAsFile());
}
}
else
...
So far, I never occurred to get anything else than text/plain
or text/html
. 到目前为止,除了text/plain
或text/html
之外,我从未想过得到任何其他东西。 For these, .getAsFile
returns null
. 对于这些, .getAsFile
返回null
。
I find the google chrome model a little confusing. 我觉得google chrome模型有点令人困惑。 It gives you more info about raw data (text/raw image), which can only be accessed using content editable div, but isn't very clear to me. 它为您提供了有关原始数据(文本/原始图像)的更多信息,这些信息只能使用内容可编辑的div进行访问,但对我来说并不是很清楚。
Our magic sauce is just: 我们的神奇酱油只是:
$('body').bind('paste', handlepaste);
Where handlepaste
is very similar to yours, so should work for you just fine for Chrome. handlepaste
与你的非常相似,所以对你来说也适合Chrome。
Unfortunately the above completely fails for FF, and we are loath to add a contenteditable
anywhere (in particular given that it has to be in focus for this to work and we don't want to steal the focus). 不幸的是,上面的FF完全失败了,我们不愿意在任何地方添加一个contenteditable
(特别是考虑到它必须成为焦点才能使其工作,我们不想窃取焦点)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.