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

李世贊發布于2019-08-26 11:45 / 2189人閱讀

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

在用戶拖拽文件到瀏覽器的某個元素上時，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);

GPU云服務器云服務器 JS拖拽 js 拖拽代碼 js 拖拽驗證 js圖標拖拽

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107490.html

畫布、拖放事件、音視頻

摘要：立即對當前矩形進行填充清除矩形語法解釋清除某個矩形內的繪制的內容，相當于橡皮擦繪制圓形概述方法創建弧曲線用于創建圓或部分圓語法解釋圓心坐標，半徑大小，繪制開始的角度。一、拖放事件 1.1 設置拖拽給標簽設置一個draggable設置為true, 標簽就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件對象為被拖拽元素) ondragstart 拖拽前觸發 ondra...

Nosee 2019-08-29 16:12 評論0 收藏0
畫布、拖放事件、音視頻

摘要：立即對當前矩形進行填充清除矩形語法解釋清除某個矩形內的繪制的內容，相當于橡皮擦繪制圓形概述方法創建弧曲線用于創建圓或部分圓語法解釋圓心坐標，半徑大小，繪制開始的角度。一、拖放事件 1.1 設置拖拽給標簽設置一個draggable設置為true, 標簽就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件對象為被拖拽元素) ondragstart 拖拽前觸發 ondra...

dailybird 2019-08-23 10:31 評論0 收藏0
畫布、拖放事件、音視頻

摘要：立即對當前矩形進行填充清除矩形語法解釋清除某個矩形內的繪制的內容，相當于橡皮擦繪制圓形概述方法創建弧曲線用于創建圓或部分圓語法解釋圓心坐標，半徑大小，繪制開始的角度。一、拖放事件 1.1 設置拖拽給標簽設置一個draggable設置為true, 標簽就可以拖拽了 1.2 拖拽事件 1.2.1拖拽元素事件 (事件對象為被拖拽元素) ondragstart 拖拽前觸發 ondra...

atinosun 2019-08-02 11:05 評論0 收藏0