9

HTML5 の filereader API を使用して、ドラッグ アンド ドロップによるファイルのアップロードを受け入れる単純な Web アプリがあります。

ファイルをWebページにドラッグすると、正しいドラッグイベントが発生しますが、ファイルをドロップすると、IEはJSに処理させるのではなく、ファイルを開くだけです。

ドロップ コードは非常に基本的なものです。

this.addEventListener("drop", function(event) {
event.stopPropagation();
event.preventDefault();
Self.drop(event); //this event is not hit. IE just opens the file!
}, false);

これは IE10 の特定の制限ですか、それとも何か間違っている可能性がありますか?

ありがとう

4

1 に答える 1

24

dragenterおよびイベントもリッスンし、dragoverデフォルトの動作を防止する必要があります。dropまた、イベント ハンドラーでも既定の動作を防止する必要があります。

たとえば、このようなことをしたいかもしれません...

var $dropArea = $( "#drop-area" );

$dropArea.on({
    "drop" : makeDrop,
    "dragenter": ignoreDrag,
    "dragover": ignoreDrag 
});

function ignoreDrag( e ) {
    e.preventDefault();
}

function makeDrop( e ) {
    var fileList = e.originalEvent.dataTransfer.files,
        fileReader;

    e.preventDefault();
    if ( fileList && fileList.length > 0 ) {
        fileReader = new FileReader();
        fileReader.onloadend = handleReaderOnLoadEnd( $( "<img />" ) );
        fileReader.readAsDataURL( fileList[ 0 ] );
    }
}

function handleReaderOnLoadEnd( $image ) {
    return function( event ) {
        $image.attr( "src", this.result )
            .addClass( "small" ) 
            .appendTo( "#drop-area" );
    };
}

この JSFiddle http://jsfiddle.net/qsyNW/で実際の例を見つけることができます。

注: 私が行ったように、これで jQuery を使用する必要はありません。e.originalEventただし、 jQueryを使用する場合はdropdataTransfer.files.

于 2013-03-02T05:15:41.800 に答える