Question

我可以使用以下代码在Chrome中成功阅读剪贴板图片：

data = event.originalEvent.clipboardData;

for (var i = 0; i<data.items.length; i++){
        var item = data.items[i];
        if (item.type === 'image/png'){
             itemFound = true;
             break;
        }
}

然而，这种方法在IE中不起作用。微软发布了一篇关于在IE中粘贴的博客（http://blogs.msdn.com/b/ie/archive/2013/10/24/enhanced-rich-editing-experiences-in-ie11.aspx）。该博客声明我应该能够使用以下代码行

var fileList = clipboardData.files;

然而，

fileList总是以空的形式返回。

有没有人知道在IE中访问剪贴板图像的方法？我能够很好地阅读文本，而不是图像。

Answer 1

假设您正在使用ClipboardEvent（），是否尝试过以下操作？

var data = event.clipboardData || event.originalEvent.clipboardData;

还是像更改代码以引用window对象那样简单？

var fileList = window.clipboardData.files

Answer 2

您只需要听粘贴事件，并使用时间间隔捕获已经创建但仍未渲染图像的时间点。然后，您只需获取图像源并清空编辑器。

以下代码实现了此算法。当您在IE或Firefox中运行它时，结果将与之前的示例在Chrome和Opera中的结果相同：

<script type="text/javascript">
$(document).ready(function() {

  $('#editor').on('paste', function (e) {
    $('#editor').empty();
        var waitToPastInterval = setInterval(function () {
            if ($('#editor').children().length > 0) {
                clearInterval(waitToPastInterval);
        $('#result').html($('#editor').find('img')[0].src);
        $('#editor').empty();
            }
        }, 1);  
  });

});
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='editor' contenteditable=true></div>
<div id='resultcnt'>Copyed image src:<br />
  <div id='result'></div>
</div>

<style  type="text/css">
#editor{
  width: 500px;
  min-height: 40px;
  border: solid 1px gray;
  padding: 4px;
}
#resultcnt{
  width: 100%;
  margin-top: 16px;
}
#result{
  display: block;
  max-width: 90%;
  margin: 16px 0 32px 0;
  font-size: 12px;
  color: blue;
  overflow: visible;
  word-break: break-all;
}
</style>

查看此线程： How do i get base64 encoded image from clipboard in internet explorer?

在IE中读取剪贴板图像

2 个答案: