IE10在刪除文件時似乎不喜歡丟棄事件

我有一個簡單的網絡應用程序，它使用HTML5中的filereader API通過拖放來接受文件上傳。IE10在刪除文件時似乎不喜歡丟棄事件

將文件拖到網頁上時，正確的拖動事件將會觸發，但是當我放棄文件時，只需打開它而不是讓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的特定限制或可能被我做錯了什麼？

感謝

來源

2012-12-06 Sergio

你也想聽聽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與此像我一樣。但是，如果您確實使用jQuery，則需要在drop事件處理函數內引用e.originalEvent以獲取dataTransfer.files。

來源

2013-03-02 05:15:41

+11

我發現在Chrome中，我可以使用拖放處理只需「dragover」和「drop」，但在IE10中我需要處理「dragenter」並防止默認，否則我的「dragover」事件從未被解僱... – markt

此外：如果您在嘗試自己的代碼時看不到'files'屬性，但它與Elijah's一起使用，那麼您可能正在對您的**本地**（Intranet）Web服務器運行測試。 IE10的大腦死亡默認是在（in）兼容性視圖中提供Intranet內容，這會禁用'dataTransfer'對象上'files'屬性等功能。在扳手菜單上，轉到「兼容性視圖設置」並取消選中「在兼容性視圖中顯示內部網站」框。 Eejits。 –

如果你不控制IE配置，你可以在你的HTML或通過自定義的HTTP頭做到這一點。在HTML中，你可以把它放在'head'的**頂端**處：'（據說某些版本會忽略如果它是在'title'之後，當然他們會的，因爲它並沒有被打破，IE11中的更多下行對我來說也是如此;沒有方便的IE10測試盒，但是我會把它放在頂部安全）。或者，當然，配置您的服務器在HTTP中發送該標頭。 –

IE10在刪除文件時似乎不喜歡丟棄事件

回答

相關問題