如何在HTML5中读取粘贴事件中的文件 [英] How to read a file on paste event in HTML5

问题描述

在HTML5中，我们知道我们可以使用预定义的API读取文件。截至目前，我已经试过

< input type =file> 和 File Drop 方法。他们为我工作得很好。

但我想知道在div上粘贴文件并在粘贴文件上捕获文件的可能性。
举例

  $（'＃dummyDIV'）。bind（'paste'，function（）
 {
 // Like var file = files [0] 
}）; 
  

谢谢

解决方案您只能读取粘贴文件的文件名。

http://jsfiddle.net/vdNFR/

  $（'body'）。bind（'paste'，function（a，b，c）{
 console.log（a.originalEvent.clipboardData）; 
 console.log（a.originalEvent.clipboardData.getData（'File'））; 
 console.log（a.originalEvent.clipboardData.getData（ 'Text'））; 
 if（a.originalEvent.clipboardData.files [0]）console.log（a.originalEvent.clipboardData.files [0] .getAsFile（））; 
 if（a .originalEvent.clipboardData.items [0]）console.log（a.originalEvent.clipboardData.items [0] .getAsFile（））; 
 console.log（a，b，c）; 
} ）; 
  

如果任何浏览器允许这种情况发生，这将是一个主要的安全漏洞。

In HTML5 we know that we can read files using predefined API. As of now I have tried

<input type="file"> and the File Drop method. They have worked fine for me.

But I want to know the possibility of pasting a file on a div and capturing the file on paste. For Example

 $('#dummyDIV').bind('paste',function()
 {
      // Like var file = files[0]
 });

Thanks

解决方案

You can only read the file name of pasted file.

http://jsfiddle.net/vdNFR/

$('body').bind('paste', function(a, b, c) {
    console.log(a.originalEvent.clipboardData);
    console.log(a.originalEvent.clipboardData.getData('File'));
    console.log(a.originalEvent.clipboardData.getData('Text'));
    if (a.originalEvent.clipboardData.files[0]) console.log(a.originalEvent.clipboardData.files[0].getAsFile());
    if (a.originalEvent.clipboardData.items[0]) console.log(a.originalEvent.clipboardData.items[0].getAsFile());
    console.log(a, b, c);
});

It would be a major security hole if any browser would allow this situation to happen.

这篇关于如何在HTML5中读取粘贴事件中的文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！