HTML Drag and Drop：本地文件名获取而非文件上传的实现

本文详细介绍了如何利用html drag and drop api在web应用中实现文件拖放功能，旨在获取被拖放文件的名称，而非执行实际的文件上传操作。通过阻止浏览器默认行为、监听关键拖放事件并解析datatransfer对象，开发者可以为用户提供直观的文件信息获取界面。文章还强调了浏览器安全机制下无法获取文件完整本地路径的限制。

在构建现代Web应用程序时，用户交互的便捷性至关重要。文件拖放（Drag and Drop）功能提供了一种直观的方式，让用户能够轻松地将本地文件或文件夹与Web界面进行交互。特别是在一些内部业务应用场景中，我们可能仅需要获取用户拖放的文件或文件夹的名称，以便在共享网络存储上定位这些文件，而无需执行实际的文件上传操作。本文将深入探讨如何使用HTML Drag and Drop API实现这一特定需求。

HTML Drag and Drop API 概述

HTML Drag and Drop API 是一套强大的接口，允许Web应用程序支持文件、文本或任何可拖动元素的拖放操作。其核心机制围绕一系列事件展开，包括 drag、dragstart、dragend、dragover、dragenter、dragleave 和 drop。通过监听这些事件，我们可以控制拖放过程的各个阶段，并访问拖放数据。

对于文件拖放，最关键的事件是 drop。当用户将文件或文件夹拖放到指定区域并释放鼠标时，drop 事件会被触发。此时，我们可以通过事件对象的 dataTransfer 属性访问到被拖放的文件列表。

构建拖放区域

首先，我们需要在HTML中定义一个可视化的拖放区域。这个区域将作为用户拖放文件时的目标。

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

HTML 结构

一个典型的拖放区域通常是一个 div 元素，内部可以包含一些提示信息和图标，以及一个隐藏的 input[type="file"] 元素作为备用文件选择器。

<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>

在这个结构中：

• div.dropzone 是主要的拖放目标区域。
• img.dropzone-icon 提供视觉提示。
• 文本内容指导用户操作。
• input.dropzone-input 是一个隐藏的文件输入框，用于在不支持拖放或用户偏好点击时提供文件选择功能。multiple 属性允许用户选择多个文件。

CSS 样式

为了提供良好的用户体验，拖放区域应该有清晰的视觉指示，并在用户拖动文件进入时提供反馈。

巧文书

巧文书是一款AI写标书、AI写方案的产品。通过自研的先进AI大模型，精准解析招标文件，智能生成投标内容。

61

查看详情

@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-dragging 类，它会在用户拖动文件到区域上方时改变背景色，提供视觉反馈。

JavaScript 核心逻辑

JavaScript 是实现拖放功能的关键。我们需要获取对拖放区域的引用，并为一系列拖放事件添加监听器。

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

// 1. 阻止默认行为
['drag', 'dragstart', 'dragend', 'dragover', 'dragenter', 'dragleave', 'drop'].forEach(function(event) {
  dropzone.addEventListener(event, function(e) {
    e.preventDefault(); // 阻止浏览器对拖放事件的默认处理
    e.stopPropagation(); // 阻止事件冒泡
  });
});

// 2. 提供视觉反馈
dropzone.addEventListener('dragover', function(e) {
  this.classList.add('dropzone-dragging'); // 拖动文件到区域上方时添加类
}, false);

dropzone.addEventListener('dragleave', function(e) {
  this.classList.remove('dropzone-dragging'); // 拖动文件离开区域时移除类
}, false);

// 3. 处理文件放置
dropzone.addEventListener('drop', function(e) {
  this.classList.remove('dropzone-dragging'); // 移除拖动状态样式
  var files = e.dataTransfer.files; // 获取被拖放的文件列表

  // 遍历文件列表，获取文件名
  Array.prototype.forEach.call(files, file => {
    alert(file.name); // 弹出每个文件的名称
    // 在实际应用中，你可以在这里处理文件名，例如发送到后端或显示在界面上
    // console.log("文件名:", file.name);
  });
}, false);

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

关键步骤解析：

1. 阻止默认行为： 浏览器对拖放事件有默认处理，例如在新标签页中打开被拖放的文件。为了实现自定义逻辑，我们必须在所有拖放事件（drag, dragstart, dragend, dragover, dragenter, dragleave, drop）中调用 e.preventDefault() 和 e.stopPropagation()。e.preventDefault() 阻止了默认行为，而 e.stopPropagation() 则防止事件冒泡到父元素。
2. 提供视觉反馈： 当用户将文件拖动到 dropzone 元素上方时，dragover 事件会被触发。我们在此事件中添加 dropzone-dragging 类，改变区域背景色，提示用户此处可放置文件。当文件离开区域时，dragleave 事件触发，我们移除该类。
3. 处理文件放置： drop 事件是核心。当用户释放文件时，该事件触发。
   • 首先，移除 dropzone-dragging 类，恢复区域的原始样式。
   • 通过 e.dataTransfer.files 获取一个 FileList 对象，其中包含了所有被拖放的文件。
   • 我们遍历这个 FileList，对于每个 file 对象，都可以访问其 name 属性，即文件的名称。在示例中，我们使用 alert(file.name) 来展示文件名，但在实际应用中，你可以将这些文件名收集起来，进行后续处理。
4. 处理点击事件： 为了提供更好的兼容性和用户体验，我们为 dropzone 添加一个 click 事件监听器。当用户点击拖放区域时，它会程序化地触发隐藏的 input[type="file"] 元素的点击事件，从而弹出文件选择对话框。

重要注意事项与局限性

尽管HTML Drag and Drop API功能强大，但在处理文件和文件夹时，存在一些重要的安全限制和行为特性，开发者必须了解：

1. 安全性与文件路径：

   • 浏览器安全沙箱： 出于安全考虑，现代浏览器不允许JavaScript直接访问用户本地文件系统的完整路径。这意味着，无论用户拖放的是文件还是文件夹，通过 file.name 属性，你只能获取到文件的基础名称（例如 document.pdf），而无法获取其在本地文件系统中的完整路径（例如 C:UsersusernameDocumentsdocument.pdf 或 /Volumes/Share/Folder/document.pdf）。
   • 原始问题中提及的 UNC 路径 (\smb-shareoooo1) 或 Mac 路径 (/Volumes/foo/foo1)，浏览器是无法通过 File API 直接提供的。file.name 始终只返回文件名部分。
   • 如果你的应用确实需要完整的本地路径，这通常需要通过浏览器扩展、本地桌面应用与Web应用通信（例如通过自定义协议或WebSocket），或者用户手动复制粘贴路径等更复杂、受限的方式实现。

2. 文件夹拖放：

   • 当用户拖放一个文件夹时，e.dataTransfer.files 集合中将包含该文件夹内部的所有文件，而不是文件夹本身作为一个文件对象。
   • 你无法直接通过 File API 获取被拖放的文件夹的名称或其内部的目录结构。file.name 仍将是文件夹内文件的名称。
   • 要处理文件夹的结构，通常需要结合 webkitGetAsEntry() 方法（非标准，但Chrome和Firefox支持）来获取 FileSystemEntry 对象，然后递归遍历其 createReader() 方法来读取目录内容。然而，这仍然无法获取到完整的本地路径，且浏览器兼容性有限。

3. 用户体验：

   • 始终为用户提供清晰的视觉反馈，例如在 dragover 事件中改变拖放区域的样式，告知用户可以进行拖放操作。
   • 提供备用的文件选择方式（如点击区域弹出文件选择对话框），以适应不同用户习惯和设备限制。

总结

HTML Drag and Drop API 为Web应用程序带来了强大的交互能力，尤其是在处理文件信息时。通过本文介绍的方法，你可以轻松地在Web应用中实现文件拖放，并提取文件的名称，而无需进行实际的文件上传。然而，作为开发者，理解浏览器安全模型对文件路径的限制至关重要。始终记住，出于用户隐私和安全考虑，浏览器不会向Web应用暴露本地文件的完整路径。在设计应用时，应充分考虑这些限制，并寻找符合安全规范的替代解决方案。

以上就是HTML Drag and Drop：本地文件名获取而非文件上传的实现的详细内容，更多请关注php中文网其它相关文章！