在Firefox中使用“粘贴Javascript监听器”复制和粘贴文件无法正常工作

Question

我想知道为什么在Firefox浏览器中，使用Javascript事件监听器从计算机复制和粘贴图像文件到浏览器不起作用？ 但是，在Chrome和Edge上尝试时，它可以完美地工作。

 <script>
    document.addEventListener('paste', (event) => {
        // event.preventDefault();
        console.log('event.items',event.clipboardData.items[0].getAsFile())
    });
</script>

上面的代码，在Chrome和Edge浏览器中，我得到了文件数据，但在Firefox中，它是未定义的。

火狐浏览器： 谷歌浏览器： 在Codepen上尝试： 这里 如果有人能弄清楚为什么，请非常感谢！或者是否有任何与Firefox兼容的替代方法？

- FGtaV

Answer 1

我发现这个行为在Windows和Linux上都存在。在macOS上，我可以从Firefox的clipboardData对象中获取文件而没有任何问题。这很奇怪，我在MDN的文档中也没有找到原因。

但是，如果你的文件是一个图片，并且你尝试将其粘贴到contenteditable的<div>中，Firefox会在粘贴事件之后尝试插入<img>标签。

所以，对于图片，你可以尝试监听<div>内部的变化，并使用src属性中的base64源。

https://jsbin.com/qacicaj/6/edit?html,js,console,output

- Den