JQuery - ドラッグアンドドロップファイル - ファイル情報の取得方法？

Question

JQuery/AJAX/PHPを使用して自分のdrag'n'dropファイルアップローダーを作成したいと思っています。

基本的には、自分のサイトのユーザーが作成したdivに自分のコンピュータからファイルをドラッグするだけで、選択した宛先にそのファイルをアップロードすることができます。私は私がより良いの制限（ファイルの種類、サイズ、先フォルダなど）を操作できるように、すべてのプラグインを使用し、最初からこれを構築し、ないしたい

しているだけで、運をGoogleに洗い上げプラグイン。とにかく私を正しい方向に向けることができますか？

更新 わかりましたので、私は何をしたいのかを考え出しました。ファイル入力フィールドの不透明度を1に設定するだけで非表示にできます。ファイルをその一般的な領域にドラッグすることもできます。テキストフィールドにヒットした場合は、それをキャッチします。しかし、私はファイルの入力フィールドの高さ/幅を増やす方法を知りたいです（ファイルの基本CSSを試しましたが、ファイルをドロップできる実際のフィールドではなく、 'ブラウズ'ボタンのサイズが増えます）。これを行うにはどのように任意のアイデア？ 私は基本的に「ドロップがここにファイル」と言う大きな正方形のdivをしたいが。だから私は、入力フィールドのサイズを変更する必要があります。

Answer 1

あなたがドロップゾーンを作成するためにHTML5 dragenterとdragleaveイベントを使用することができます。
は、次にドロップゾーン内のファイル入力を配置し、CSSでそれを隠すことによって、あなたはファイルをアップロードすることができたときに、この

var dropzone = $("#dropzone"), 
    input = dropzone.find('input'); 

dropzone.on({ 
    dragenter : dragin, 
    dragleave : dragout 
}); 

input.on('change', drop); 

function dragin(e) { //function for drag into element, just turns the bix X white 
    $(dropzone).addClass('hover'); 
} 

function dragout(e) { //function for dragging out of element       
    $(dropzone).removeClass('hover'); 
} 

function drop(e) { 
    var file = this.files[0]; 
    $('#dropzone').removeClass('hover').addClass('dropped').find('img').remove(); 

    // upload file here 
} 

などの入力のための火災 changeイベント、興味のある方のために

FIDDLE

Answer 2

、私が参考にして、このチュートリアル/デモが見つかりました：http://www.viget.com/inspire/custom-file-inputs-with-a-bit-of-jquery/

は、基本的にはデフォルトの入力フィールドをカバーするために<span>を使用しています。

Answer 3

ここにチャイムするだけで、これも数日前にやっています。 jQueryを使ってドロップイベントをバインドする場合は、event.dataTransferオブジェクトにアクセスする必要があります。これは、jQueryによって提供されたイベントのevent.originalEventオブジェクトを通過する必要があります。

例：これはデフォルトのアクションを実行するのを防止する必要があったとして、私は、両方のdragoverだけでなくdropなどのイベントに結合し、この中

（ここで見つけることソリューション：Prevent the default action. Working only in chrome）

$('#dropzone').bind('dragover drop', function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
    if (event.type == 'drop') { 
     console.log(event.originalEvent.dataTransfer.files); 
    } 
}); 

また、console.log()event.dataTransfer（またはevent.originalEvent.dataTransfer）のファイル配列が空の場合、ここで指摘されているバグがあるようです：event.dataTransfer.files is empty when ondrop is fired?

は、より良い（私はそれの残りの部分に気づいた、と私はそれが古いです知っているが、いくつかのいずれかがこの便利を見つけるかもしれない）のOPの質問に答えるために：

私の実装では、jQueryのであるので、私はそれは大丈夫だ願っています：

var files = []; 

// Attaches to the dropzone to pickup the files dropped on it. In mine this is a div. 
$("#dropzone").bind('dragover drop', function(event) { 
    // Stop default actions - if you don't it will open the files in the browser 
    event.stopPropagation(); 
    event.preventDefault(); 

    if (e.type == 'drop') { 
     files.push(event.originalEvent.dataTransfer.files); 
    } 
}); 

// Attach this to a an input type file so it can grab files selected by the input 
$("#file-input").bind('change', function(event) { 
    files.push(event.target.files); 
}); 

// This is a link or button which when clicked will do the ajax request 
// and upload the files 
$("#upload-button").bind('click', function(event) { 
    // Stop the default actions 
    event.stopPropagation(); 
    event.preventDefault(); 

    if (files.length == 0) { 
     // Handle what you want to happen if no files were in the "queue" on clicking upload 
     return; 
    } 

    var formData = new FormData(); 
    $.each(files, function(key, value) { 
     formData.append(key, value); 
    }); 

    $.ajax({ 
     url: 'upload-ajax', 
     type: 'POST', 
     data: formData, 
     cache: false, 
     dataType: 'json', 
     processData: false, // Don't process the files - I actually got this and the next from an SO post but I don't remember where 
     contentType: false, // Set content type to false as jQuery will tell the server its a query string request 
     success: function(data, textStatus, jqXHR) { /* Handle success */ }, 
     error: function(jqXHR, textStatus, errorThrown) { /* Handle error */ } 
    }); 

}); 

ドロップゾーンのフェードインを見せるように（私のライブラリのToDoリストに表示されるように）、エフェクトを実行するための受け入れられた回答の他のイベントにバインドすることもできます。これは私が使用している実際のAjaxファイルのアップロードの中核です。

私は本当にそれをテストする便利な方法はありませんが、それは本質的にどのように行ったのですか（私は基本的に私が作ったライブラリからすべてのコードを取り出し、ここではわかりやすい方法で）。うまくいけば、これはいくつかの人々を助ける。ここから始めて、ファイルキューのリストを追加してキューからファイルを削除することは実際には本当に簡単なので、これはかなり良い出発点になるはずです。