js控制文件拖拽并獲取拖拽內容實現代碼

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

阻止默認行為

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

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

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

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

獲得拖拽的文件

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

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

在Chrome中我們用items對象獲得文件，其他瀏覽器用files獲得文件，主要是為了處理拖拽文件夾的問題，最好不允許用戶拖拽文件夾，因為文件夾內可能還有文件夾，遞歸上傳文件會很久，如果不遞歸查找，只上傳目錄第一層級的文件，用戶可能以為上傳功能了，但是沒有上傳子目錄文件，所以還是禁止上傳文件夾比較好，后面我會說要怎么處理。

Chrome獲取文件

其他瀏覽器獲取文件

這里只測試了Safari，其他瀏覽器并沒有測試，不過看完本文一定也有思路處理其他瀏覽器的兼容情況。

由于Safari沒有item，自然也沒有webkitGetAsEntry，所以在Safari無法確定拖拽的是否是文件還是文件夾。

非Chrome內核瀏覽器判斷目錄的方法

瀏覽器獲取到的每個file對象有四個屬性：lastModified、name、size、type，其中type是文件的MIME Type，文件夾的type是空的，但是有些文件沒有MIME Type，如果按照type是否為空判斷是不是拖拽的文件夾的話，會誤傷一部分文件，所以這個方法行。

那么還有什么方法可以判斷呢，思路大概是這樣子的，用戶拖拽的文件和文件夾應該是不一樣的東西，用File API操作的時候應該會有區別，比如進行某些操作的時候，文件就能夠正常操作，但是文件夾就會報錯，通過錯誤的捕獲就能夠判斷是文件還是文件夾了，好我們根據這個思路來寫一下。

上面代碼創建了一個FileReader實例，通過這個實例對文件進行讀取，我測試讀取一個1G多的文件要3S多，時間有點長，就用slice截取了前3個字符，為什么是前3個不是前2個或者前4個呢，因為代碼是我寫的，我開心這么寫唄~

如果load事件觸發了，就說明拖拽過來的東西是文件，如果error事件觸發了，就說明是文件夾，為了防止其他可能的潛在錯誤，用try包起來這段代碼。

三方應用的一點點小hack

經過測試發現通過Mac的Finder拖拽文件沒有問題，但是有時候文件并不一定在Finder中，也可能在某些應用中，有一個應用叫做圈點，這個應用的用戶反饋文件拖拽失效，去看了其他開源文件上傳的源碼，發現了這樣一行代碼：

需要把dropEffect置為copy，上網搜了下這個問題，源碼文檔中也沒有說為什么要加這個，有興趣的同學可以找一下為什么。

可以拿來就用的代碼

由于用了FileReader去讀取文件，這是一個異步IO操作，為了記錄當前處理了多少個文件，以及什么時候觸發拖拽結束的回調，寫了一個checkDropFinish的方法一直去比較處理的文件數量和文件總數，確定所有文件處理完了后就去調用完成的回調。

另外，我在最后調試異步處理的時候，用的斷點調試，發現斷點調試在Safari中會導致異步回調不觸發，需要自己調試定制功能的同學注意下。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com