JavaScript/HTML5/jQueryドラッグアンドドロップアップロード - 未知のタイプエラー：未定義のプロパティ 'ファイル'を読み取れません。

Question

JavaScriptの経験が限られていることを前にお伝えします。

---

現在、私は、JavaScriptのコードがあります。

$('#xhr-filebox').bind({ 
    "dragover": HandleDragEvent, 
    "dragleave": HandleDragEvent, 
    "drop": HandleDropEvent 
}); 

function HandleDropEvent(e){ 
    var files = e.target.files || e.dataTransfer.files; 
    UploadFile(files[0]); 
} 

（いくつかのコードが省略されていますが、要求した場合、私はより多くを追加します）

...とHTML：

<div class="filebox" id="xhr-filebox"> 
    <p id="xhr-action">...or click me to pick one.</p> 
</div> 

を

しかし、ファイルをドラッグすると、ChromeのJSコンソールでこれが表示されます。

Uncaught TypeError: Cannot read property 'files' of undefined

ただし、ファイル入力から読み込むときにFileListオブジェクトを取得できます。

不思議なことに、私は（にconsole.log（e）を）イベント引数をログインしたときに、それは私のようなスクリプトでは、それはMouseEventのようにそれをログに記録し、一方、f.eventとしてそれを記録します（スクリーンショット：http://i.stack.imgur.com/3krcT.png）

jQueryのbind（）関数とは異なり、getElementById（）によって返されるDOMオブジェクトのaddEventListener（）関数を使用します。これは、純粋なJavaScriptです。私はその方法を試みましたが、新しいことは起こりません。

Answer 1

filesがe.target上に存在しない場合は、あなたがしようとするでしょう—   e.dataTransferではなくeにはdataTransferプロパティがありません（とあなたのスクリーンショットにあるように存在していないようだ）場合filesを探しています参照をundefinedとすると、このエラーが発生します。

私は、コードを変更したい：e.target.filesが存在しない場合は、

function HandleDropEvent(e){ 
    var files = e.target.files || (e.dataTransfer && e.dataTransfer.files); 
    if (files) { 
     UploadFile(files[0]); 
    } 
    else { 
     // Perhaps some kind of message here 
    } 
} 

その方法をしてe.dataTransferもエラーではなく、あなたがfilesがundefinedされ得るだろう、存在しません。 。

---

jQueryが提供するイベントオブジェクトは、jQueryによって作成され、正規化されます。 e.dataTransferがそのイベントオブジェクト（スクリーンショットから）に存在しないことを知っているので、jQueryが元のイベントオブジェクトからコピーするプロパティの1つではありません。しかし、jQueryはe.originalEvent経由で元のイベントへのアクセスを提供しているので、大丈夫です。だから私は試してみた：

それはそれがどこにあるのですか dataTransferオブジェクトから、我々はそれを見つけるところはどこでも（ e上、または e.originalEvent上）場合 e.targetから filesをつかむ

function HandleDropEvent(e){ 
    var dt = e.dataTransfer || (e.originalEvent && e.originalEvent.dataTransfer); 
    var files = e.target.files || (dt && dt.files); 
    if (files) { 
     UploadFile(files[0]); 
    } 
    else { 
     // Perhaps some kind of message here 
    } 
} 

。

私は最後の数年間、次のコードを使用していた

Answer 2

：

var files = e.target.files || 
(e.dataTransfer ? e.dataTransfer.files : e.originalEvent.dataTransfer.files); 

はしかし、私はe.target.filesがあったChromeを使用して問題になく、0の長さで、最近実行しましたこれにより、dataTransferにドロップされたファイルがあってもファイルが空になりました。Hopefulyこれは他の誰かを助けるかもしれ

var files = e.target.files; 
if (!files || files.length === 0) 
    files = (e.dataTransfer ? e.dataTransfer.files : .originalEvent.dataTransfer.files); 

：

だから、私は少し異なるチェックを使用しなければなりませんでした。