删除文件时，IE10似乎不喜欢drop事件 [英] IE10 does not appear to like the drop event when dropping a file

问题描述

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

I have a simple web app that uses the filereader api in HTML5 to accept file uploads through drag and drop.

将文件拖到网页上时，正确拖动事件将触发，但当我删除文件IE时只需打开它而不是让JS处理它。

Upon dragging a file onto the webpage, the correct drag event will fire, but when I drop the file IE simply opens it rather than letting the JS handle it.

丢弃代码非常基本：

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

这是IE10的特定限制还是我做错了什么？

Is this a specific limitation of IE10 or could I be doing something wrong?

谢谢

推荐答案

您还想听 dragenter 和 dragover 事件并阻止其默认行为。您还需要阻止 drop 事件处理程序中的默认行为。

You will want to also listen to the dragenter and dragover events and prevent their default behavior. You'll also want to prevent default behavior in the drop event handler as well.

例如，您可能需要做这样的事情......

For example you may want to do something like this...

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/

You can find a working example at this JSFiddle http://jsfiddle.net/qsyNW/

注意：你没有必须像我一样使用jQuery。但是，如果您使用jQuery，那么您需要在 drop 事件处理程序中引用 e.originalEvent 获得 dataTransfer.files 。

Note: You don't have to use jQuery with this like I did. However, if you do use jQuery then you'll need to reference e.originalEvent inside the drop event handler in order to get at the dataTransfer.files.

这篇关于删除文件时，IE10似乎不喜欢drop事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！