js控制文件拖拽，獲取拖拽內容。

在用戶拖拽文件到瀏覽器的某個元素上時，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類型的數據，有以下的屬性

屬性	類型	說明
dropEffect	String	用來hack某些兼容性問題
effectAllowed	String	暫時不用
files	FileList	拖拽的文件列表
items	DataTransferItemList	拖拽的數據(有多是字符串)
types	Array	拖拽的數據類型 該屬性在Safari下比較混亂

在Chrome中咱們用items對象得到文件，其餘瀏覽器用files得到文件，主要是爲了處理拖拽文件夾的問題，最好不容許用戶拖拽文件夾，由於文件夾內可能還有文件夾，遞歸上傳文件會好久，若是不遞歸查找，只上傳目錄第一層級的文件，用戶可能覺得上傳功能了，可是沒有上傳子目錄文件，因此仍是禁止上傳文件夾比較好，後面我會說要怎麼處理。

Chrome獲取文件

dropZone.addEventListener("drop", function (e) {
    e.preventDefault();
    e.stopPropagation();
    
    var df = e.dataTransfer;
    var dropFiles = []; // 存放拖拽的文件對象
    
    if(df.items !== undefined) {
        // Chrome有items屬性，對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);
            }
        }
    }
}

其餘瀏覽器獲取文件

這裏只測試了Safari，其餘瀏覽器並無測試，不過看完本文必定也有思路處理其餘瀏覽器的兼容狀況。

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++) {
            dropFiles.push(df.files[i]);
        }
    }
}

因爲Safari沒有item，天然也沒有webkitGetAsEntry，因此在Safari沒法肯定拖拽的是不是文件仍是文件夾。

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

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

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

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);

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

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

三方應用的一點點小hack

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

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

須要把dropEffect置爲copy，上網搜了下這個問題，源碼文檔中也沒有說爲何要加這個，有興趣的同窗能夠找一下爲何。

能夠拿來就用的代碼

因爲用了FileReader去讀取文件，這是一個異步IO操做，爲了記錄當前處理了多少個文件，以及何時觸發拖拽結束的回調，寫了一個checkDropFinish的方法一直去比較處理的文件數量和文件總數，肯定全部文件處理完了後就去調用完成的回調。

另外，我在最後調試異步處理的時候，用的斷點調試，發現斷點調試在Safari中會致使異步回調不觸發，須要本身調試定製功能的同窗注意下。

// 得到拖拽文件的回調函數
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'; // 兼容某些三方應用，如圈點
    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 = []; // 拖拽的文件，會放到這裏
    var dealFileCnt = 0; // 讀取文件是個異步的過程，須要記錄處理了多少個文件了
    var allFileLen = df.files.length; // 全部的文件的數量，給非Chrome瀏覽器使用的變量

    // 檢測是否已經把全部的文件都遍歷過了
    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);