当前位置：首页 > article >正文

前端拖拽上传文件与文件夹的实现

article 2025/1/30 14:02:03

在现代的 Web 开发中，拖拽上传文件或文件夹的功能是一个常见且用户友好的操作。随着 HTML5 引入的 Drag and Drop API，浏览器支持通过拖拽的方式上传文件和文件夹，让用户能够更加便捷地将文件上传到 Web 应用程序中。本文将详细介绍如何使用 event.dataTransfer.files 和 event.dataTransfer.items 来实现文件和文件夹的拖拽上传功能。

1. 理解拖拽事件的核心属性

1.1 event.dataTransfer.files

event.dataTransfer.files 是一个 FileList 对象，它包含了所有被拖拽到目标元素上的文件。FileList 是一个类数组对象，包含了拖拽的文件信息。你可以直接访问文件的名称、大小、类型等。

1.2 event.dataTransfer.items

event.dataTransfer.items 是一个包含拖拽项目的数组，它可以包含多种不同类型的项目，不仅限于文件。在处理文件夹时，items 会包含一个或多个 DataTransferItem 对象，每个 DataTransferItem 对象表示拖拽中的一个项目。

1.3 文件与文件夹的不同处理方式

文件上传：当用户拖拽文件到页面时，浏览器会通过 event.dataTransfer.files 属性提供文件的信息。
文件夹上传：当用户拖拽文件夹时，浏览器通过 event.dataTransfer.items 提供文件夹内的文件信息。你可以使用 webkitGetAsEntry() 方法来判断和处理文件夹内容。

2. 实现文件拖拽上传

2.1 HTML 结构

首先，创建一个 HTML 元素（如一个 div）来接收拖拽的文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽上传文件</title>
</head>
<body>
    <div id="drop-area" style="width: 100%; height: 200px; border: 2px dashed #ccc; text-align: center; line-height: 200px;">
        拖拽文件到此区域
    </div>
    <script src="drag-drop.js"></script>
</body>
</html>

2.2 JavaScript 代码实现

接下来，通过 JavaScript 处理文件的拖拽和上传逻辑：

document.getElementById('drop-area').addEventListener('dragover', function (e) {
    e.preventDefault();  // 防止浏览器默认处理（例如打开文件）
    e.dataTransfer.dropEffect = 'copy';  // 设置拖拽效果为复制
});

document.getElementById('drop-area').addEventListener('drop', function (e) {
    e.preventDefault();
    
    // 获取拖拽的文件
    const files = e.dataTransfer.files;
    
    // 如果没有文件被拖拽
    if (files.length === 0) {
        alert('没有文件被拖拽');
        return;
    }
    
    // 遍历文件列表并打印文件信息
    for (const file of files) {
        console.log(`文件名：${file.name}`);
        console.log(`文件类型：${file.type}`);
        console.log(`文件大小：${file.size} 字节`);
    }
});

2.3 说明

dragover 事件：当文件被拖拽到目标区域时触发，我们通过 e.preventDefault() 阻止了默认的浏览器行为，这样就可以自定义拖拽操作。
drop 事件：当文件被放置到目标区域时触发。在事件处理函数中，我们通过 e.dataTransfer.files 获取文件列表，并打印出文件的基本信息。

3. 实现文件夹拖拽上传

当用户拖拽文件夹时，浏览器会提供不同的处理方式。通过 event.dataTransfer.items 和 webkitGetAsEntry() 方法，我们可以获取文件夹内的文件并遍历。

3.1 修改 HTML 结构

<div id="drop-area" style="width: 100%; height: 200px; border: 2px dashed #ccc; text-align: center; line-height: 200px;">
    拖拽文件或文件夹到此区域
</div>

3.2 JavaScript 代码实现

document.getElementById('drop-area').addEventListener('dragover', function (e) {
    e.preventDefault();
    e.dataTransfer.dropEffect = 'copy';
});

document.getElementById('drop-area').addEventListener('drop', function (e) {
    e.preventDefault();
    
    // 获取拖拽的项目
    const items = e.dataTransfer.items;
    
    // 检查每个项目
    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        
        if (item.kind === 'file') {
            const file = item.getAsFile();  // 获取文件对象
            console.log(`文件名：${file.name}`);
        } else {
            const entry = item.webkitGetAsEntry();  // 获取文件夹条目
            
            if (entry.isDirectory) {
                // 如果是文件夹，遍历文件夹中的所有文件
                console.log('这是一个文件夹');
                traverseDirectory(entry);
            }
        }
    }
});

// 递归遍历文件夹中的文件
function traverseDirectory(directoryEntry) {
    const dirReader = directoryEntry.createReader();
    dirReader.readEntries((entries) => {
        entries.forEach(entry => {
            if (entry.isFile) {
                entry.file(file => {
                    console.log(`文件名：${file.name}`);
                });
            } else if (entry.isDirectory) {
                traverseDirectory(entry);  // 递归处理子文件夹
            }
        });
    });
}

3.3 说明

webkitGetAsEntry()：该方法用于获取拖拽项的文件夹条目，返回一个 FileSystemEntry 对象，可以用来判断是否为文件夹。
递归遍历文件夹：通过 FileSystemDirectoryReader 读取文件夹内容，并递归获取文件夹中的文件和子文件夹。