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

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

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

HTML Drag and Drop API 核心概念

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

构建拖放区域

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

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

样式化拖放区域

@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类）或鼠标悬停时改变背景色的交互效果。

启明星企业抽奖程序1.0

启明星企业抽奖程序 系统采用ASP.NET4.0 无需数据库。在企业抽奖时，请勿关闭或者刷新页面。因为系统目前没有提供保存数据功能。例如在抽二等奖和一等奖之间，可能有时间间隔。那么，此时，你可以按F11取消全屏，然后最小化页面，再单击右下角喇叭，设置无声。1.启明星抽奖程序配置说明使用说明：在lottery/lottery文件夹下，有3个文本文件。company.txt存放公司名称，award.t

下载

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();
});

代码解析：

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

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

注意事项与总结

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