摘要：在用戶拖拽文件到瀏覽器的某個(gè)元素上時(shí)，可以監(jiān)聽到與拖拽相關(guān)的事件，并對(duì)拖拽結(jié)果進(jìn)行處理，本文討論下和拖拽文件相關(guān)的一些問題，不過沒有處理太多關(guān)于兼容性的問題。其中，與拖拽文件相關(guān)的事件有文件拖拽進(jìn)文件拖拽在懸浮文件拖拽離開文件拖拽放下。

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

js能夠監(jiān)聽到拖拽的事件有drag、dragend、dragenter、dragexit(沒有瀏覽器實(shí)現(xiàn))、dragleave、dragover、dragstart、drop，詳細(xì)的內(nèi)容可以看MDN。

其中，與拖拽文件相關(guān)的事件有dragenter(文件拖拽進(jìn))、dragover(文件拖拽在懸浮)、dragleave(文件拖拽離開)、drop(文件拖拽放下)。
拖拽事件可以綁定到指定的DOM元素上，可以綁定到整個(gè)頁面中。

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

document.addEventListener("drop", function (e) {
    // 
}, false);

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

因?yàn)楫?dāng)你拖拽一個(gè)文件到?jīng)]有對(duì)拖拽事件進(jìn)行處理的瀏覽器中的時(shí)候，瀏覽器會(huì)打開這個(gè)文件，比如拖拽一張圖片瀏覽器會(huì)打開這個(gè)圖片，在沒有PDF閱讀器的時(shí)候也可以拖拽一個(gè)PDF到瀏覽器中，瀏覽器就會(huì)打開這個(gè)PDF文件。

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

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();
    // 處理拖拽文件的邏輯
}

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

我們會(huì)在drop這個(gè)事件的回調(diào)中的事件對(duì)象能夠得到文件對(duì)象。

在事件對(duì)象中，一個(gè)e.dataTransfer這樣的屬性，它是一個(gè)DataTransfer類型的數(shù)據(jù)，有如下的屬性

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

dropZone.addEventListener("drop", function (e) {
    e.preventDefault();
    e.stopPropagation();
    
    var df = e.dataTransfer;
    var dropFiles = []; // 存放拖拽的文件對(duì)象
    
    if(df.items !== undefined) {
        // Chrome有items屬性，對(duì)Chrome的多帶帶處理
        for(var i = 0; i < df.items.length; i++) {
            var item = df.items[i];
            // 用webkitGetAsEntry禁止上傳目錄
            if(item.kind === "file" && item.webkitGetAsEntry().isFile) {
                var file = item.getAsFile();
                dropFiles.push(file);
            }
        }
    }
}

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

dropZone.addEventListener("drop", function (e) {
    e.preventDefault();
    e.stopPropagation();
    
    var df = e.dataTransfer;
    var dropFiles = []; // 存放拖拽的文件對(duì)象
    
    if(df.items !== undefined) {
        // Chrome拖拽文件邏輯
    } else {
        for(var i = 0; i < df.files.length; i++) {
            dropFiles.push(df.files[i]);
        }
    }
}

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

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

那么還有什么方法可以判斷呢，思路大概是這樣子的，用戶拖拽的文件和文件夾應(yīng)該是不一樣的東西，用File API操作的時(shí)候應(yīng)該會(huì)有區(qū)別，比如進(jìn)行某些操作的時(shí)候，文件就能夠正常操作，但是文件夾就會(huì)報(bào)錯(cuò)，通過錯(cuò)誤的捕獲就能夠判斷是文件還是文件夾了，好我們根據(jù)這個(gè)思路來寫一下。

dropZone.addEventListener("drop", function (e) {
    e.preventDefault();
    e.stopPropagation();

    var df = e.dataTransfer;
    var dropFiles = [];
    
    if(df.items !== undefined){
        // Chrome拖拽文件邏輯
    } else {
        for(var i = 0; i < df.files.length; i++){
            var dropFile = df.files[i];
            if ( dropFile.type ) {
                // 如果type不是空串，一定是文件
                dropFiles.push(dropFile);
            } else {
                try {
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(dropFile.slice(0, 3));

                    fileReader.addEventListener("load", function (e) {
                        console.log(e, "load");
                        dropFiles.push(dropFile);
                    }, false);

                    fileReader.addEventListener("error", function (e) {
                        console.log(e, "error，不可以上傳文件夾");
                    }, false);

                } catch (e) {
                    console.log(e, "catch error，不可以上傳文件夾");
                }
            }
        }
    }
}, false);

上面代碼創(chuàng)建了一個(gè)FileReader實(shí)例，通過這個(gè)實(shí)例對(duì)文件進(jìn)行讀取，我測(cè)試讀取一個(gè)1G多的文件要3S多，時(shí)間有點(diǎn)長(zhǎng)，就用slice截取了前3個(gè)字符，為什么是前3個(gè)不是前2個(gè)或者前4個(gè)呢，因?yàn)榇a是我寫的，我開心這么寫唄~

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

經(jīng)過測(cè)試發(fā)現(xiàn)通過Mac的Finder拖拽文件沒有問題，但是有時(shí)候文件并不一定在Finder中，也可能在某些應(yīng)用中，有一個(gè)應(yīng)用叫做圈點(diǎn)，這個(gè)應(yīng)用的用戶反饋文件拖拽失效，去看了其他開源文件上傳的源碼，發(fā)現(xiàn)了這樣一行代碼：

dropZone.addEventListener("dragover", function (e) {
    e.dataTransfer.dropEffect = "copy"; // 兼容某些三方應(yīng)用，如圈點(diǎn)
    e.preventDefault();
    e.stopPropagation();
}, false);

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

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

另外，我在最后調(diào)試異步處理的時(shí)候，用的斷點(diǎn)調(diào)試，發(fā)現(xiàn)斷點(diǎn)調(diào)試在Safari中會(huì)導(dǎo)致異步回調(diào)不觸發(fā)，需要自己調(diào)試定制功能的同學(xué)注意下。

// 獲得拖拽文件的回調(diào)函數(shù)
function getDropFileCallBack (dropFiles) {
    console.log(dropFiles, dropFiles.length);
}

var dropZone = document.querySelector("#dropZone");
dropZone.addEventListener("dragenter", function (e) {
    e.preventDefault();
    e.stopPropagation();
}, false);

dropZone.addEventListener("dragover", function (e) {
    e.dataTransfer.dropEffect = "copy"; // 兼容某些三方應(yīng)用，如圈點(diǎn)
    e.preventDefault();
    e.stopPropagation();
}, false);

dropZone.addEventListener("dragleave", function (e) {
    e.preventDefault();
    e.stopPropagation();
}, false);

dropZone.addEventListener("drop", function (e) {
    e.preventDefault();
    e.stopPropagation();

    var df = e.dataTransfer;
    var dropFiles = []; // 拖拽的文件，會(huì)放到這里
    var dealFileCnt = 0; // 讀取文件是個(gè)異步的過程，需要記錄處理了多少個(gè)文件了
    var allFileLen = df.files.length; // 所有的文件的數(shù)量，給非Chrome瀏覽器使用的變量

    // 檢測(cè)是否已經(jīng)把所有的文件都遍歷過了
    function checkDropFinish () {
        if ( dealFileCnt === allFileLen-1 ) {
            getDropFileCallBack(dropFiles);
        }
        dealFileCnt++;
    }

    if(df.items !== undefined){
        // Chrome拖拽文件邏輯
        for(var i = 0; i < df.items.length; i++) {
            var item = df.items[i];
            if(item.kind === "file" && item.webkitGetAsEntry().isFile) {
                var file = item.getAsFile();
                dropFiles.push(file);
                console.log(file);
            }
        }
    } else {
        // 非Chrome拖拽文件邏輯
        for(var i = 0; i < allFileLen; i++) {
            var dropFile = df.files[i];
            if ( dropFile.type ) {
                dropFiles.push(dropFile);
                checkDropFinish();
            } else {
                try {
                    var fileReader = new FileReader();
                    fileReader.readAsDataURL(dropFile.slice(0, 3));

                    fileReader.addEventListener("load", function (e) {
                        console.log(e, "load");
                        dropFiles.push(dropFile);
                        checkDropFinish();
                    }, false);

                    fileReader.addEventListener("error", function (e) {
                        console.log(e, "error，不可以上傳文件夾");
                        checkDropFinish();
                    }, false);

                } catch (e) {
                    console.log(e, "catch error，不可以上傳文件夾");
                    checkDropFinish();
                }
            }
        }
    }
}, false);