web-dev-qa-db-ja.com

jQueryのドロップイベントを使用して、デスクトップからドラッグされたファイルをアップロードする方法

デスクトップからファイルをドラッグするためにjQueryのdropイベントを使用することは可能ですか？

その場合、ドロップされたファイルデータを取得するにはどうすればよいですか？

javascriptjqueryhtml5drag-and-drop
63
Chin

少々厄介ですが（少なくとも3つのイベントを処理する必要があります）、可能です。

最初に、dragoverおよびdragenterのイベントハンドラーを追加し、これらのイベントのデフォルトアクションを防止する必要があります。

$('#div').on(
    'dragover',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
)
$('#div').on(
    'dragenter',
    function(e) {
        e.preventDefault();
        e.stopPropagation();
    }
)

これらのイベントでpreventDefaultを呼び出すことが実際に重要です。そうしないと、一部のブラウザーがdropイベントをトリガーしない場合があります。

次に、ドロップハンドラを追加し、e.originalEvent.dataTransfer.filesを使用してドロップされたファイルにアクセスできます。

$('#div').on(
    'drop',
    function(e){
        if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) {
            e.preventDefault();
            e.stopPropagation();
            /*UPLOAD FILES HERE*/
            upload(e.originalEvent.dataTransfer.files);
        }
    }
);

これで、div内のデスクトップ/エクスプローラー/ファインダーからファイルをドラッグしてアクセスできるようになりました。

http://jsfiddle.net/fSA4N/5/

137
Alex