5

私は javascript で自分の手を試している Java の男で、助けが必要です。ここで画像のアップロードに関する素晴らしいチュートリアルに出くわしましたMozilla チュートリアルそして、それを理解するのに助けが必要です. 私は現在、ドラッグアンドドロップの画像アップロード機能に取り組んでいます。画像を領域にドラッグするたびに、マウスが緑色に変わり、アクティブになります。しかし、手を離すと、1 つの画像が見つかったことを示すアラートが送信されます。ただし、常に 0 をアラートするだけです。したがって、配列のサイズは 0 です。何かアイデアはありますか? ご覧いただきありがとうございます。私が試したことは成功しませんでした...

  1. チュートリアルのコードを正確にコピーして JavaScript ファイルに貼り付ける
  2. コードを移動してリスナーを関数の外に追加し、ウィンドウのオンロードに追加する
  3. 私が持っているすべてのブラウザ

...

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);
}

.

更新- フィドルの結果

ここに画像の説明を入力

4

1 に答える 1

1

更新
実際の問題は、1つのWebブラウザタブからこのWebベースのドラッグアンドドロップインターフェイスに画像を直接ドラッグしようとすると、イベントは発生しますが、ファイルはドロップされないことが判明しました。質問者はOSXでこの問題に気づき、Windows7でも同じ動作を再現することができました。

HTMLを見ないと、何に問題があったのかを判断するのは困難です。ondragover / ondragenterピースが正しく設定されていない場合、ドロップは機能しませんが、アラートはまったく表示されません。ブラウザがローカルファイルシステムから画像をレンダリングするのを見るだけです。これは、dropイベントを正しい要素にほぼ確実に追加していることも意味します。

このフィドルを試して、それがあなたのために働くかどうか確かめてください：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);
}
于 2013-03-06T04:42:21.060 に答える