ファイルがファイル入力にドラッグされたときの検出

Question

ファイルをアップロードするためにユーザーがファイル入力をクリックしたときに検出するこのコードがあります。

$('input:file').click(function() { 
    // do stuff here 
}); 

私は多くのユーザーがファイルをアップロードするファイル入力にファイルをドラッグしている、そしてそれが起こるとき、これがトリガされていないことを発見しました。私はmouseupと組み合わせてmouseoverと考えていましたが、その間にユーザーがファイルを保持していたかどうかわかりません。

明確にするために、ドラッグアンドドロップを実装する手助けは必要ありません。また、可能であれば、私はファイル入力を使い続け、divなどの他の要素へのドロップを含む解決策は使用しません。実際のファイル入力にドロップを残しておきたい。

ファイル入力にドラッグされているファイルを検出して、対応できるようにするにはどうすればよいですか？

Answer 1

は、あなたはあなたがドラッグが発生し、このイベントのあなたの行動時に監視したい領域のみを定義する必要がdragenterとdragleave

container.addEventListener("dragenter", this.dragenter, true); 
container.addEventListener("dragleave", this.dragleave, true); 

のようにブラウザのネイティブドラッグイベントに反応することができます。