ドラッグアンドドロップのJavaScriptイベント

Question

私はJavaの人で、JavaScriptを手に入れて助けが必要です。私はここで画像のアップロードに関する驚くべきチュートリアルを見に来てMozilla Tutorialとそれを理解する助けを必要とします。私は現在ドラッグアンドドロップ画像のアップロード機能に取り組んでいます。画像を自分のエリアにドラッグするたびに、マウスが緑色に変わり、それがアクティブになります。しかし、私が手放すとき、それは私に、一つのイメージが発見されたという警告を送るべきです。しかし、常に警告するだけです。配列のサイズは0です。どのようなアイデアですか？見ていただきありがとうございます。正確

関数の外側とウィンドウにリスナーを追加するコードを移動するのonload

私は...ない成功を収めて

1. のコピーを試してみたし、私のjavascriptのファイルにチュートリアルからコードを貼り付けます
2. すべてのブラウザでは、私は

...

function toggleStrideMedia() 
{ 
    if(getDisplay("strideMediaWrapper") == "" || getDisplay("strideMediaWrapper") == "none") 
    { 
     show("strideMediaWrapper"); 

     getElement("strideMediaDropZone").addEventListener("dragenter", dragenter, false); 
     getElement("strideMediaDropZone").addEventListener("dragover", dragover, false); 
     getElement("strideMediaDropZone").addEventListener("drop", drop, false); 

    } 
    else 
    { 
     hide("strideMediaWrapper"); 
    } 
} 

function dragenter(e) 
{ 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

function dragover(e) 
{ 
    e.stopPropagation(); 
    e.preventDefault(); 
} 

function drop(e) 
{ 
    e.stopPropagation(); 
    e.preventDefault(); 

    var dt = e.dataTransfer; 
    var files = dt.files; 

    // THIS SHOULD BE GIVING ME A ONE BUT IT ALWAYS GIVES ME A ZERO INSTEAD 
    alert(files.length); 

    handleFiles(files); 
} 

を持っています。

UPDATE - フィドルが

Answer 1

結果
UPDATEは実際の問題は、あなたがこのウェブベースのドラッグに1つのWebブラウザのタブから直接画像をドラッグしようとすることであることが判明し、イベントが発生しますが、ファイルは削除されません。アスカーはOSX上で、この問題を指摘し、私はあなたのHTMLを見ることなく

---

のWindows 7で同じ動作を再現することができた、それはあなたが難しさを持ったものを伝えるのは難しいです。 ondragover/ondragenterピースが正しく設定されていないと、落としても動作しませんが、アラートは表示されません。ブラウザはローカルファイルシステムからイメージをレンダリングするだけです。つまり、ほぼ確実に正しい要素にドロップイベントを追加することができます。

このフィドルを試してみて、それがあなたのために働くかどうかを確認： `ondragover`と` ondrop`ではなく、 `を使用してhttp://jsfiddle.net/qey9G/4/

HTML

<div> 
     <div id="dropzone" style="margin:30px; width:500px; height:300px; 
            border:1px dotted grey;"> 
       Drag & drop your file here... 
     </div> 
</div> 

はJavaScript

var dropzone = document.getElementById("dropzone"); 

dropzone.ondragover = dropzone.ondragenter = function(event) { 
    event.stopPropagation(); 
    event.preventDefault(); 
} 

dropzone.ondrop= function drop(e) 
{ 
    e.stopPropagation(); 
    e.preventDefault(); 

    var dt = e.dataTransfer; 
    var files = dt.files; 

    alert(files.length); 
}