如何在Webkit浏览器中访问粘贴的文件？ （如Google Chrome） [英] How can I access pasted file in webkit browsers? (as Google Chrome)
问题描述
如果能够在Stack Exchange上粘贴图像，而不是插入文件对话框，这将非常方便。类似的功能在这里实现，但仅适用于Webkit浏览器。
我正在开发 userscript来完成这项工作。有趣的是，我从来没有完成获取文件（这是不同于原始图像数据）从Webkit浏览器中的剪贴板中获得，而在Firefox中则可行。
Firefox解决方案：
div.addEventListener（'paste'，function（event）{
//我实际上不确定event.originalEvent应该是什么，我拷贝了这个
var items =（event.clipboardData || event.originalEvent.clipboardData）;
console.log（paste，items）;
//尝试获取文件并将其作为Blob / File处理
var files = items.items || items.files;
if（files.length> 0）{
//懒惰我只选择第一个文件
var file = files [0 ];
//处理File对象
_this.processFile（file）;
event.preventDefault（）;
event.cancelBubble = true;
返回false;
}
}）;
在Chrome没有像Firefox那样好的文档之前（我的意思是MDN），我试图检查发生了什么事。我复制了一个文件，并将其粘贴到Google Chrome（v39）中。这就是我在控制台中的 DataTransfer 对象中获得的内容：
参考资料中，这里是Firefox中的相同事件：
其他两个数组，项目和类型在Firefox实现中不存在。当我复制文本或原始图像数据时，Chrome将其表示为 DataTransferItem 。我发现最好忽略这些：
//懒惰我只是选择第一个文件
var file =文件[0];
// GOOGLE CHROME
if（file.getAsFile）{
console.log（DataTransferItem：，file）;
// HTML或文本将由contenteditable div处理b $ b if（file.type！=text / plain&& file.type！=text / html）{
//处理File对象
_this.processFile（file.getAsFile（））;
}
}
else
...
到目前为止，除了 text / plain 或 text / html 之外，我从来没有想过得到任何东西。对于这些， .getAsFile 返回 null 。
I找到谷歌铬模型有点混乱。它提供了关于原始数据（文本/原始图像）的更多信息，这些信息只能使用content editable div访问，但对我来说不是很明确。
我们的魔法酱只是：
$（'body'）。bind（'paste '，处理膏）;
其中 handlepaste 与您非常相似，所以应该为你工作，只适用于Chrome。
不幸的是，上面的FF完全失败，我们不愿意添加 contenteditable 任何地方（特别是考虑到 需要关注这个工作，我们不想窃取焦点）。
It would be very convenient if one was able to paste images here, on Stack Exchange instead of meddling with a file dialog. Similar feature was (is?) implemented here, but only for Webkit browsers.
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.
Firefox solution:
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. I copied a file and I pasted it in Google chrome (v39). This is what I get in the DataTransfer object in the console:
For refference, here's the same event in Firefox:
The other two arrays, items and types are not present in Firefox implementation. When I copy text or raw image data Chrome represents it as 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. For these, .getAsFile returns null.
I find the google chrome model a little confusing. 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.
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.
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).
这篇关于如何在Webkit浏览器中访问粘贴的文件？ （如Google Chrome）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
