删除文件时,IE10似乎不喜欢drop事件

时间:2012-12-06 11:26:22

标签: html5 internet-explorer-10

我有一个简单的网络应用,它使用HTML5中的filereader api通过拖放接受文件上传。

将文件拖到网页上时,会触发正确的拖动事件,但是当我删除文件时,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的特定限制还是我做错了什么?

由于

1 个答案:

答案 0 :(得分:24)

您还希望收听dragenterdragover事件并阻止其默认行为。您还需要防止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。但是,如果您使用jQuery,则需要在e.originalEvent事件处理程序中引用drop以获取dataTransfer.files