使用HTML拖放API获取文件/文件夹名称（无需上传）-html教程-PHP中文网

使用HTML拖放API获取文件/文件夹名称（无需上传）

聖光之護

发布： 2025-11-15 12:18:06

原创

186人浏览过

使用HTML拖放API获取文件/文件夹名称（无需上传）

本文详细介绍了如何利用html drag and drop api，在不实际上传文件的情况下，获取用户拖放到网页区域的文件或文件夹名称。这对于仅需文件元信息（如名称）而无需传输文件内容的内部业务应用尤其有用，避免了不必要的上传操作，同时提供了交互式用户体验。

引言：无需上传，仅获取文件/文件夹名称的场景

在某些特定的Web应用场景中，例如内部业务系统处理共享网络存储上的文件，我们可能需要用户通过拖放操作来指定文件或文件夹。然而，此时我们关心的不是文件的实际上传，而是其名称或路径信息。传统的HTML文件输入框通常伴随着上传机制，而HTML Drag and Drop API则提供了一种优雅的解决方案，允许我们仅捕获拖放事件并提取所需的文件元数据，而无需启动文件上传流程。

HTML Drag and Drop API 核心概念

HTML Drag and Drop API 是一套强大的接口，允许用户通过鼠标将可拖动元素从一个位置拖放到另一个位置。对于文件拖放，最关键的事件是 `drop`，它发生在用户将可拖动元素（此处为文件或文件夹）放置到有效放置目标上时。在 `drop` 事件中，我们可以通过 `event.dataTransfer.files` 属性访问到被拖放的文件列表。

需要注意的是，出于浏览器安全限制，通过 dataTransfer.files 只能获取到文件的基本名称 (file.name)，而无法获取到其完整的本地系统路径（例如Windows的UNC路径或macOS的/Volumes/foo/foo1路径）。如果用户拖放的是一个文件夹，e.dataTransfer.files 将包含该文件夹内的所有文件，而不是文件夹本身作为一个单独的文件对象。

构建拖放区域

首先，我们需要在HTML中创建一个可视化的拖放区域，并为其指定一个ID以便于JavaScript操作。

<h1>Vanilla JS Drag & Drop upload zone for input file element</h1>

<div class="dropzone" id="dropzone">
    <img class="dropzone-icon" src="https://wickedev.com/wp-content/uploads/2021/02/cloud-uploading.png" />

    Drop files or Click here to select files to upload.
    <input type="file" name="files" class="dropzone-input" multiple />
</div>

登录后复制

此HTML结构包含一个div作为拖放区域，一个图标和一些提示文本。input type="file"元素被隐藏，但通过点击拖放区域可以触发其选择文件功能（尽管本文主要关注拖放）。

样式化拖放区域

为了提供良好的用户体验，我们可以为拖放区域添加一些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; /* 隐藏实际的文件输入框 */
  }
}

登录后复制

上述CSS代码定义了拖放区域的边框、背景、文本样式，并实现了在文件拖动到区域上方时（通过.dropzone-dragging类）或鼠标悬停时改变背景色的交互效果。

JavaScript 事件处理

核心逻辑在于JavaScript，它将监听拖放事件并提取文件信息。

var dropzone = document.getElementById('dropzone');
var dropzone_input = dropzone.querySelector('.dropzone-input');
// var multiple = dropzone_input.getAttribute('multiple') ? true : false; // 此行在本场景中非必需

// 阻止浏览器默认行为：防止文件在新标签页中打开
['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 => {
    // 在这里处理文件名称，例如显示在UI中或发送到后端
    alert(file.name); // 示例：使用alert显示文件名称
    // 实际应用中，建议将名称展示在页面元素中，而不是使用alert
    // console.log("文件名:", file.name);
  });
}, false);

// 点击拖放区域时，触发隐藏的文件输入框点击事件
dropzone.addEventListener('click', function(e) {
  dropzone_input.click();
});

登录后复制

代码解析：

NameGPT名称生成器

免费AI公司名称生成器，AI在线生成企业名称，注册公司名称起名大全。

查看详情

立即学习“前端免费学习笔记（深入）”；

获取DOM元素：首先获取拖放区域 (#dropzone) 和隐藏的文件输入框 (.dropzone-input)。
阻止默认行为：通过监听 drag, dragstart, dragend, dragover, dragenter, dragleave, drop 等事件并调用 e.preventDefault() 和 e.stopPropagation()，可以阻止浏览器对拖放操作的默认处理（例如，将文件在新标签页中打开）。
视觉反馈：
- dragover 事件：当文件被拖动到拖放区域上方时触发。此时为拖放区域添加 dropzone-dragging 类，改变其背景色，提供视觉提示。
- dragleave 事件：当文件离开拖放区域时触发。移除 dropzone-dragging 类。
drop 事件处理：
- 这是核心事件。当用户释放鼠标，文件被放置到拖放区域时触发。
- e.dataTransfer.files：这是一个 FileList 对象，包含了所有被拖放的文件。即使拖放的是一个文件夹，这里也会列出文件夹内的所有文件。
- 遍历 files：通过 Array.prototype.forEach.call(files, file => { ... }) 遍历 FileList 中的每个 File 对象。
- file.name：对于每个 File 对象，file.name 属性提供了文件的名称（不包含路径）。
- 重要提示：示例代码使用了 alert(file.name) 来展示文件名。在实际应用中，您应该将这些文件名收集起来，显示在页面上的列表中，或通过AJAX发送到服务器进行进一步处理。
点击事件：为了提供备用方案，当用户点击拖放区域时，会触发隐藏的 input type="file" 元素的点击事件，允许用户通过文件选择对话框选择文件。

注意事项与总结

* **安全限制**：再次强调，出于浏览器安全考虑，您无法直接通过JavaScript获取到文件的完整本地系统路径（如UNC路径或Mac路径），只能获取到文件的基本名称 (`file.name`)。 * **文件夹处理**：当用户拖放一个文件夹时，`e.dataTransfer.files` 将包含该文件夹内的所有文件，而不是文件夹本身。如果您需要处理文件夹结构，可能需要结合更高级的API（如 `DataTransferItem.webkitGetAsEntry()`），但这超出了本教程的范围，且兼容性可能存在限制。 * **用户体验**：提供清晰的视觉反馈（如拖动时的边框或背景色变化）对于提升用户体验至关重要。 * **替代方案**：除了拖放，保留点击区域触发文件选择框的功能，可以为用户提供选择文件的多种方式。

通过上述方法，您可以有效地利用HTML Drag and Drop API在Web应用中实现无需上传即可获取文件/文件夹名称的功能，为用户提供更直观、高效的交互体验，特别适用于那些对文件路径信息敏感但不需要实际文件内容的内部应用场景。

以上就是使用HTML拖放API获取文件/文件夹名称（无需上传）的详细内容，更多请关注php中文网其它相关文章！