在用戶拖拽文件到瀏覽器的某個元素上時，js可以監聽到與拖拽相關的事件，并對拖拽結果進行處理，本文討論下和拖拽文件相關的一些問題，不過沒有處理太多關于兼容性的問題。

拖拽事件

js能夠監聽到拖拽的事件有drag、dragend、dragenter、dragexit(沒有瀏覽器實現)、dragleave、dragover、dragstart、drop，詳細的內容可以看MDN。

其中，與拖拽文件相關的事件有dragenter(文件拖拽進)、dragover(文件拖拽在懸浮)、dragleave(文件拖拽離開)、drop(文件拖拽放下)。

拖拽事件可以綁定到指定的DOM元素上，可以綁定到整個頁面中。

var dropEle = document.querySelector('#dropZone');dropEle.addEventListener('drop', function (e) {  // }, false);document.addEventListener('drop', function (e) {  // }, false);

阻止默認行為

一般來說，我們只需要把處理拖拽文件的業務邏輯寫到drop事件中就可以了，為什么還要綁定dragenter、dragover、dragleave這三個事件呢？

因為當你拖拽一個文件到沒有對拖拽事件進行處理的瀏覽器中的時候，瀏覽器會打開這個文件，比如拖拽一張圖片瀏覽器會打開這個圖片，在沒有PDF閱讀器的時候也可以拖拽一個PDF到瀏覽器中，瀏覽器就會打開這個PDF文件。

如果瀏覽器打開了拖拽的文件，頁面就跳走了，我們希望得到拖拽的文件，而不是讓頁面跳走。上面說到瀏覽器會打開拖拽的文件是瀏覽器的默認行為，我們需要阻止這個默認行為，就需要再上述的事件中進行阻止。

dropZone.addEventListener("dragenter", function (e) {  e.preventDefault();  e.stopPropagation();}, false);dropZone.addEventListener("dragover", function (e) {  e.preventDefault();  e.stopPropagation();}, false);dropZone.addEventListener("dragleave", function (e) {  e.preventDefault();  e.stopPropagation();}, false);dropZone.addEventListener("drop", function (e) {  e.preventDefault();  e.stopPropagation();  // 處理拖拽文件的邏輯}

實際上dragenter不阻止默認行為也不會觸發瀏覽器打開文件，為了防止某些瀏覽器可能有的兼容性問題，把拖拽周期中的所有的事件都阻止默認行為并且阻止了事件冒泡。

獲得拖拽的文件

我們會在drop這個事件的回調中的事件對象能夠得到文件對象。

在事件對象中，一個e.dataTransfer這樣的屬性，它是一個DataTransfer類型的數據，有如下的屬性