快捷導(dǎo)航

JavaScript實現(xiàn)文件的拖拽上傳功能

更新時間：2024年02月26日 08:29:28 作者：程序員大澈

文件上傳,可以說是我們在項目中最常用的功能之一,文件上傳一般有兩種形式：點擊上傳和拖拽上傳,而上傳的內(nèi)容,又大體包括：文件和文件夾,本文給大家介紹了JavaScript實現(xiàn)文件的拖拽上傳功能的方法,需要的朋友可以參考下

1. 需求分析

文件上傳，可以說是我們在項目中最常用的功能之一。

文件上傳一般有兩種形式：點擊上傳和拖拽上傳。而上傳的內(nèi)容，又大體包括：文件和文件夾。

在項目中，我們一般都會直接選擇使用UI庫提供的上傳組件，簡單配置一下必要的屬性，就實現(xiàn)了文件上傳功能，至于組件底層實現(xiàn)的原理，是絲毫不知。

所以今天，針對文件和文件夾的拖拽上傳功能，我整理了一下具體的實現(xiàn)，很簡單一起瞧瞧。

2. 問題實現(xiàn)

先普及一下元素拖拽的幾個API知識點，再放上文件拖拽上傳的實現(xiàn)代碼，并做簡單的描述，最后做小結(jié)。

2.1 拖拽的6個API

元素拖拽的6個API分別是：dragenter、dragover、drop 以及 dragstart、drag、dragend。

ondragstart 事件：該事件在拖動操作開始時觸發(fā)，即拖動操作的起點。通常在該事件的處理函數(shù)中設(shè)置拖動的數(shù)據(jù)和效果。

drag 事件：該事件在元素正在被拖動時持續(xù)觸發(fā)，即在拖動過程中?？梢栽谠撌录奶幚砗瘮?shù)中執(zhí)行一些實時的操作，例如更新元素的位置或顯示一些效果。

dragend 事件：該事件在拖動操作結(jié)束時觸發(fā)，即拖動操作的終點。通常在該事件的處理函數(shù)中執(zhí)行一些清理操作或其他邏輯。

這三個事件通常用于控制拖動元素起始、過程和結(jié)束階段的行為。

ondragenter 事件：該事件在拖動元素進(jìn)入目標(biāo)元素的范圍時觸發(fā)?？梢栽谠撌录奶幚砗瘮?shù)中執(zhí)行一些顯示效果或狀態(tài)改變等操作。

ondragover 事件：該事件在拖動元素在目標(biāo)元素上移動時持續(xù)觸發(fā)，即在拖動元素在目標(biāo)元素上懸停期間。通常需要阻止默認(rèn)的拖放行為，以便允許在目標(biāo)元素上釋放。

ondrop 事件：該事件在拖動元素在目標(biāo)元素上釋放時觸發(fā)?？梢栽谠撌录奶幚砗瘮?shù)中獲取拖動的數(shù)據(jù)并執(zhí)行相應(yīng)的操作。

這三個事件通常用于控制目標(biāo)元素在接受拖動元素時的行為。

2.2 文件拖拽上傳實現(xiàn)

元素拖拽的6個API，這里我們只需要使用dragover、drop這兩個，就能實現(xiàn)文件拖拽上傳。

下面簡單描述一下實現(xiàn)過程，具體細(xì)節(jié)大家看代碼就好，原理很簡單。

先獲取頁面中的 DropFrame 元素，再為其添加兩個事件監(jiān)聽器。

dragover 事件監(jiān)聽器：當(dāng)有元素拖拽到 DropFrame 區(qū)域時觸發(fā)，用于指定拖放操作的效果。這里必須阻止事件默認(rèn)行為，否則文件是拖不上去的，會被瀏覽器所阻止。

drop 事件監(jiān)聽器：當(dāng)在 DropFrame 區(qū)域釋放拖拽的元素時觸發(fā)，用于處理拖放完成后的操作。內(nèi)部通過遍歷 e.dataTransfer.items ，判斷文件或文件夾，文件就直接獲取File對象，文件夾則遞歸獲取內(nèi)部文件的File對象，最后依次單獨上傳服務(wù)器。

完整實現(xiàn)代碼如下，復(fù)制即可使用。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        #DropFrame {
            width: 360px;
            height: 120px;
            background-color: #b8deff;
            border: solid 1px #3470ff;
        }
    </style>
</head>

<body>
    <!-- 拖拽區(qū)域 -->
    <div id="DropFrame">文件拖到這里上傳</div>
</body>

<script>
    let dropFrame = document.getElementById('DropFrame');

    // 拖動元素在目標(biāo)元素上懸停期間
    dropFrame.addEventListener('dragover', (e) => {
        // 阻止默認(rèn)事件和冒泡 必須寫
        e.stopPropagation();
        e.preventDefault();
    });

    // 拖動元素在目標(biāo)元素上釋放時觸發(fā)
    dropFrame.addEventListener('drop', (e) => {
        // 阻止默認(rèn)事件和冒泡 必須寫
        e.stopPropagation();
        e.preventDefault();

        // 文件上傳處理邏輯
        let items = e.dataTransfer.items;

        for (const item of items) {
            // 提取Entry對象
            const entry = item.webkitGetAsEntry();

            if (entry.isFile) {
                // 處理文件，拿到File文件
                entry.file((file) => {
                    console.log(file, 'file');

                    // 上傳文件到服務(wù)器
                    // var formData = new FormData();
                    // formData.append('file', file);
                    // axios.post('/upload', formData, {})
                })

            } else {
                // 處理文件夾，拿到FileEntry對象
                const reader = entry.createReader()
                reader.readEntries((entries) => {
                    reHandleFile(entries)
                })
            }
        }

    });

    // 如果文件夾是多級，則遞歸讀取
    const reHandleFile = (entries) => {
        for (const entry of entries) {
            if (entry.isFile) {
                // 處理文件，拿到File文件
                entry.file((file) => {
                    console.log(file, 'file');
                    // 上傳文件到服務(wù)器
                    // var formData = new FormData();
                    // formData.append('file', file);
                    // axios.post('/upload', formData, {})
                })
            } else {
                // 處理文件夾，拿到FileEntry對象
                const reader = entry.createReader()
                reader.readEntries((entries) => {
                    // 遞歸
                    reHandleFile(entries)
                })
            }
        }
    }
</script>
</html>