2011-12-20 22 views
16

HTML5では、あらかじめ定義されたAPIを使用してファイルを読み取ることができます。今のところ私は試しましたHTML5の貼り付けイベントでファイルを読み取る方法

<input type="file">File Dropメソッドです。彼らは私のためにうまくいった。

しかし、divにファイルを貼り付け、貼り付けでファイルを取り込む可能性を知りたいと思います。例

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

おかげ

+4

理論上、クリップボードにもファイルが含まれている可能性があります。したがって、ドロップ方法と同じ方法でアクセスできます。 console.log()を使ってイベントオブジェクトを探し、プロパティオブジェクトが存在するかどうか、そしてそれに到達するために必要なパスを調べます。 –

+0

このサイトは、ドロップ時に使用されたのとまったく同じ方法でペーストされたファイルを読み込むことができます:http://base64img.com/ - ただし、オンラインのアドレスをテキストボックスに貼り付けることによって行われますが、わかりませんもしそれがdropzoneにファイルを貼り付けることによって動作したら? – adeneo

答えて

16

については あなただけ貼り付けたファイルのファイル名を読み取ることができます。

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); 
}); 

どのブラウザがこのような状況が起こることを可能とする場合は、主要なセキュリティホールになります。

+0

+1どんなブラウザでもそれを可能にするチャンスはありません – bardiir

+6

なぜセキュリティホールになるのか不思議です。説明できますか? – Sundeep

+0

事故は危害を引き起こす。合意したそして、1つは、間違いを支払う必要があります。私がKeePassファイルを使って遊ぶのが愚かなユーザーではないとしましょう。 – Sundeep

関連する問題