本教程详细讲解如何利用html drag and drop api在网页应用中实现文件和文件夹的拖放功能，仅获取其名称信息，而无需实际上传文件。这对于内部业务系统处理共享网络存储上的文件路径尤其适用，能有效提升用户操作便捷性，同时规避了传统文件上传的复杂性。
引言：轻量级文件信息获取方案
在许多内部业务应用中，我们可能需要用户通过拖放操作来指定文件或文件夹，但目的并非是上传这些文件到服务器。相反，我们可能只关心这些文件或文件夹的名称或路径信息，例如，它们在共享网络存储上的位置。传统的input type="file"元素虽然支持文件选择，但无法直接处理文件夹拖放，且默认行为通常与文件上传相关。HTML Drag and Drop API提供了一种优雅的解决方案，允许开发者在客户端获取拖放项的名称，而无需涉及复杂的文件上传流程。
HTML Drag and Drop API核心原理
HTML Drag and Drop API是浏览器内置的一套用于实现拖放功能的接口。其核心在于DataTransfer对象，该对象在拖放事件（如dragover、drop）中被传递，包含了拖放操作的数据。
当用户将文件或文件夹拖放到指定区域时，drop事件会被触发。通过事件对象e的dataTransfer属性，我们可以访问到files列表。e.dataTransfer.files是一个FileList对象，其中包含了所有被拖放的文件。对于FileList中的每个File对象，其name属性即可提供文件的名称。
关键事件：
立即学习“前端免费学习笔记（深入）”；
- dragover: 当拖动元素或文件悬停在有效放置目标上时触发。需要阻止此事件的默认行为，以允许放置。
- dragleave: 当拖动元素或文件离开放置目标时触发。
- drop: 当拖动元素或文件在放置目标上被释放时触发。这是获取文件信息的主要事件。
构建拖放区域：代码实践
为了实现一个功能完善的拖放区域，我们需要结合HTML结构、CSS样式和JavaScript逻辑。
1. HTML结构：定义可拖放区域
首先，在HTML中创建一个div元素作为拖放区域。为了提供一个备用的文件选择机制，我们还可以包含一个隐藏的input type="file"元素。
Vanilla JS Drag & Drop upload zone for input file element
@@##@@ 拖放文件或点击此处选择文件
- div.dropzone: 这是用户拖放文件的可视区域。
- img.dropzone-icon: 提供视觉引导。
- input.dropzone-input: 隐藏的文件输入框，用于在用户点击拖放区域时触发文件选择对话框。multiple属性允许选择多个文件。
2. CSS样式：美化用户体验
通过CSS为拖放区域添加样式，使其更具吸引力，并提供拖放时的视觉反馈。
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');
body {
font-family: "Roboto";
}
h1 {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 2px solid lighten(#6583fe, 15%);
font-size: 1.5rem;
font-weight: 400;
}
.dropzone {
border: 0.2rem dashed #6583fe;
padding: 2rem;
border-radius: 0.25rem;
background-color: #fff;
text-align: center;
font-size: 1.5rem;
transition: 0.25s background-color ease-in-out;
cursor: pointer;
&-dragging, /* 拖放时添加的类 */
&:hover {
background-color: lighten(#6583fe, 28%); /* 悬停或拖放时背景变色 */
}
&-icon {
max-width: 75px;
display: block;
margin: 0 auto 1.5rem;
}
&-input {
display: none; /* 隐藏文件输入框 */
}
}- .dropzone: 定义了拖放区域的边框、内边距、背景色和文本样式。
- .dropzone-dragging: 这是一个关键的类，当文件被拖动到区域上方时会动态添加，提供视觉反馈。
3. JavaScript逻辑：处理拖放事件
JavaScript代码将负责监听拖放事件、阻止默认行为、更新UI状态以及最终提取文件名称。
var dropzone = document.getElementById('dropzone');
var dropzone_input = dropzone.querySelector('.dropzone-input');
// 阻止所有拖放相关事件的默认行为，确保浏览器不会自行处理文件
['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(function(event) {
dropzone.addEventListener(event, function(e) {
e.preventDefault();
e.stopPropagation();
});
});
// 当文件拖入区域时，添加拖动样式
dropzone.addEventListener('dragover', function(e) {
this.classList.add('dropzone-dragging');
}, false);
// 当文件拖出区域时，移除拖动样式
dropzone.addEventListener('dragleave', function(e) {
this.classList.remove('dropzone-dragging');
}, false);
// 处理文件放置事件
dropzone.addEventListener('drop', function(e) {
this.classList.remove('dropzone-dragging'); // 移除拖动样式
var files = e.dataTransfer.files; // 获取拖放的文件列表
// 遍历文件列表，获取并显示每个文件的名称
Array.prototype.forEach.call(files, file => {
alert(file.name); // 在实际应用中，这里可以进行更复杂的处理，如显示在列表中
});
}, false);
// 监听点击事件，点击拖放区域时触发隐藏的文件输入框
dropzone.addEventListener('click', function(e) {
dropzone_input.click();
});
// 监听文件输入框的change事件，处理通过点击选择的文件
dropzone_input.addEventListener('change', function(e) {
var files = e.target.files;
Array.prototype.forEach.call(files, file => {
alert(file.name);
});
});- 阻止默认行为: e.preventDefault()和e.stopPropagation()是至关重要的，它们阻止浏览器对拖放事件的默认处理（例如，打开拖放的文件）。
- 视觉反馈: dragover和dragleave事件用于动态添加和移除dropzone-dragging类，提供用户友好的视觉提示。
- drop事件处理: 在drop事件中，通过e.dataTransfer.files获取文件列表，然后遍历并提取file.name。这里使用alert作为示例，实际应用中可以将其展示在页面上或发送到后端进行处理。
- 点击选择: dropzone.addEventListener('click', ...)使得用户也可以通过点击拖放区域来打开文件选择对话框，提高了交互的灵活性。同时，需要监听dropzone_input的change事件来处理通过点击选择的文件。
重要注意事项
- 路径限制与安全性： 出于安全考虑，浏览器通常不会提供文件的完整本地路径（例如 C:\path\to\file.txt 或 Windows UNC 路径 \\server\share\file.txt）。file.name属性通常只会返回文件的基本名称（例如 file.txt）。如果您的应用确实需要完整的本地路径，您可能需要考虑非标准API（如某些浏览器特定的扩展）或使用桌面应用程序与Web应用进行通信的混合模式，因为标准的Web API无法满足此需求。
- 文件夹处理： 当用户拖放一个文件夹时，e.dataTransfer.files通常会包含该文件夹内的所有文件，而不是文件夹本身作为一个单独的实体。要获取文件夹的名称或遍历其内部结构，需要使用更高级且通常是非标准的API（例如，基于Webkit的浏览器可能支持DataTransferItem.webkitGetAsEntry()），但这些API的兼容性较差，不推荐用于跨浏览器应用。本教程提供的代码将列出文件夹内的所有文件名称。
- 用户体验： 提供清晰的视觉指示（如拖放区域边框变化、背景色变化）对于提升用户体验至关重要，让用户清楚地知道何时可以放置文件。
- 浏览器兼容性： HTML Drag and Drop API在现代主流浏览器中得到了广泛支持。但在开发时仍建议进行跨浏览器测试。
总结
利用HTML Drag and Drop API，我们可以轻松地在Web应用中实现文件和文件夹的拖放功能，仅获取其名称信息，而无需进行实际的文件上传。这种方法对于需要处理本地文件路径的内部业务系统或桌面辅助工具非常实用，它简化了用户操作，并避免了不必要的文件传输开销。虽然存在获取完整本地路径和文件夹结构信息的限制，但对于大多数仅需文件名或基本文件识别的场景，此API已足够强大且易于实现。
