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

Question

jQueryのdropイベントをデスクトップからファイルをドラッグするのに使用できますか？

もしそうなら、削除されたファイルデータを取得するにはどうすればよいですか？

Answer 1

少し面倒です（少なくとも3つのイベントを処理する必要がありますが）。

まず、あなたはdragoverとdragenterのためのEventHandlerを追加し、そのようなこれらのイベントのデフォルトのアクションを阻止する必要があります。

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

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

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

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

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