12

私は 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 コンソールに次のように表示されます。

キャッチされていない TypeError: 未定義のプロパティ 'ファイル' を読み取れません

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

興味深いことに、イベント引数 ( console.log(e) ) をログに記録すると、f.event としてログに記録されますが、私の同様のスクリプトでは、MouseEvent としてログに記録されます (スクリーンショット: http://i.stack.imgur .com/3krcT.png )

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

4

2 に答える 2

19

filesが on に存在しない場合は、 one.targetを探しています — しかし、 on にプロパティが存在しない場合files(スクリーンショットに存在しないように見える場合) は、 を逆参照しようとするため、このエラーが発生します。e.dataTransferdataTransfereundefined

コードを次のように変更します。

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.target.filesが存在せず、e.dataTransfer も存在しない場合、エラーではなく が表示filesされます。undefined

jQuery が提供するイベント オブジェクトは、jQuery によって作成および正規化されます。e.dataTransfer(スクリーンショットから) そのイベント オブジェクトには存在しないことがわかっているので、元のイベント オブジェクトから jQuery がコピーしたプロパティの 1 つではないことが推測されます。ただし、jQuery は を介し​​て元のイベントにアクセスできるため、問題ありませんe.originalEvent。だから私は試してみます：

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

それがどこにあるか、またはオブジェクトが見つかった場所 ( on 、または on )filesから取得します。e.targetdataTransferee.originalEvent

于 2012-05-30T09:30:40.690 に答える