HTML拖放API：实现文件/文件夹名称获取，无需实际上传

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

HTML拖放API：实现文件/文件夹名称获取，无需实际上传

2025-11-06

浏览次数：次

返回列表

HTML拖放API：实现文件/文件夹名称获取，无需实际上传

本教程详细介绍了如何利用html drag and drop api在web应用中实现文件或文件夹的拖放功能，并仅获取其名称或路径信息，而无需执行实际的文件上传操作。这对于需要处理本地或网络共享文件路径的内部业务应用尤其适用，提升用户体验并简化操作流程。

引言：HTML拖放API在非上传场景下的应用

在许多Web应用中，用户交互常常涉及文件的拖放操作。传统上，这通常与文件上传功能紧密关联。然而，对于某些特定的内部业务应用，例如管理本地或网络共享存储上的文件，我们可能仅需要获取用户拖放的文件或文件夹的名称（或路径信息），而无需实际将文件内容上传到服务器。这种场景下，HTML Drag and Drop API提供了一种高效且用户友好的解决方案，它允许我们监听拖放事件，并从事件数据中提取所需的文件元数据，极大地简化了操作流程并提高了用户体验。

核心原理：Drag and Drop API与文件元数据获取

HTML Drag and Drop API允许网页元素响应用户的拖放手势。当用户将一个或多个文件或文件夹拖放到网页上的指定区域时，会触发一系列拖放事件。其中，drop 事件是获取文件信息的关键。

在 drop 事件中，我们可以通过 event.dataTransfer.files 属性访问到一个 FileList 对象，该对象包含了所有被拖放的文件或文件夹。FileList 中的每个元素都是一个 File 对象，它提供了文件的各种元数据，包括 name（文件名或文件夹名）、size（文件大小）、type（文件MIME类型）和 lastModified（最后修改时间）。

为了确保浏览器正确处理拖放事件并阻止其默认行为（例如，浏览器默认可能会尝试打开或下载被拖放的文件），我们必须在拖放事件处理函数中调用 event.preventDefault() 和 event.stopPropagation()。

BrandCrowd

一个在线Logo免费设计生成器

200 查看详情 BrandCrowd

构建拖放区域：HTML结构

首先，我们需要在HTML中创建一个可视化的拖放区域。这个区域将作为用户拖放文件或文件夹的目标。通常，我们会使用一个 div 元素来作为拖放容器，并可以在其中放置一些提示信息或图标。为了提供备用的文件选择方式（例如，点击区域打开文件选择对话框），我们还可以包含一个隐藏的 input type="file" 元素。

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

<div class="dropzone" id="dropzone">
    @@##@@

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

在这个结构中：

div.dropzone 是主要的拖放目标区域。
img.dropzone-icon 提供视觉提示。
input type="file" class="dropzone-input" multiple 是一个隐藏的文件输入框，multiple 属性允许用户选择多个文件。

样式美化：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;
  }