本文详细介绍了如何利用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”] 元素作为备用文件选择器。
Vanilla JS Drag & Drop upload zone for input file element
@@##@@ Drop files or Click here to select files to upload.
在这个结构中：
div.dropzone 是主要的拖放目标区域。img.dropzone-icon 提供视觉提示。文本内容指导用户操作。input.dropzone-input 是一个隐藏的文件输入框，用于在不支持拖放或用户偏好点击时提供文件选择功能。multiple 属性允许用户选择多个文件。
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-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(); // 点击拖放区域时触发隐藏的文件输入框});
关键步骤解析：
阻止默认行为： 浏览器对拖放事件有默认处理，例如在新标签页中打开被拖放的文件。为了实现自定义逻辑，我们必须在所有拖放事件（drag, dragstart, dragend, dragover, dragenter, dragleave, drop）中调用 e.preventDefault() 和 e.stopPropagation()。e.preventDefault() 阻止了默认行为，而 e.stopPropagation() 则防止事件冒泡到父元素。提供视觉反馈： 当用户将文件拖动到 dropzone 元素上方时，dragover 事件会被触发。我们在此事件中添加 dropzone-dragging 类，改变区域背景色，提示用户此处可放置文件。当文件离开区域时，dragleave 事件触发，我们移除该类。处理文件放置： drop 事件是核心。当用户释放文件时，该事件触发。首先，移除 dropzone-dragging 类，恢复区域的原始样式。通过 e.dataTransfer.files 获取一个 FileList 对象，其中包含了所有被拖放的文件。我们遍历这个 FileList，对于每个 file 对象，都可以访问其 name 属性，即文件的名称。在示例中，我们使用 alert(file.name) 来展示文件名，但在实际应用中，你可以将这些文件名收集起来，进行后续处理。处理点击事件： 为了提供更好的兼容性和用户体验，我们为 dropzone 添加一个 click 事件监听器。当用户点击拖放区域时，它会程序化地触发隐藏的 input[type=”file”] 元素的点击事件，从而弹出文件选择对话框。
重要注意事项与局限性
尽管HTML Drag and Drop API功能强大，但在处理文件和文件夹时，存在一些重要的安全限制和行为特性，开发者必须了解：
安全性与文件路径：
浏览器安全沙箱： 出于安全考虑，现代浏览器不允许JavaScript直接访问用户本地文件系统的完整路径。这意味着，无论用户拖放的是文件还是文件夹，通过 file.name 属性，你只能获取到文件的基础名称（例如 document.pdf），而无法获取其在本地文件系统中的完整路径（例如 C:UsersusernameDocumentsdocument.pdf 或 /Volumes/Share/Folder/document.pdf）。原始问题中提及的 UNC 路径 (smb-shareoooo1) 或 Mac 路径 (/Volumes/foo/foo1)，浏览器是无法通过 File API 直接提供的。file.name 始终只返回文件名部分。如果你的应用确实需要完整的本地路径，这通常需要通过浏览器扩展、本地桌面应用与Web应用通信（例如通过自定义协议或WebSocket），或者用户手动复制粘贴路径等更复杂、受限的方式实现。
文件夹拖放：
当用户拖放一个文件夹时，e.dataTransfer.files 集合中将包含该文件夹内部的所有文件，而不是文件夹本身作为一个文件对象。你无法直接通过 File API 获取被拖放的文件夹的名称或其内部的目录结构。file.name 仍将是文件夹内文件的名称。要处理文件夹的结构，通常需要结合 webkitGetAsEntry() 方法（非标准，但Chrome和Firefox支持）来获取 FileSystemEntry 对象，然后递归遍历其 createReader() 方法来读取目录内容。然而，这仍然无法获取到完整的本地路径，且浏览器兼容性有限。
用户体验：
始终为用户提供清晰的视觉反馈，例如在 dragover 事件中改变拖放区域的样式，告知用户可以进行拖放操作。提供备用的文件选择方式（如点击区域弹出文件选择对话框），以适应不同用户习惯和设备限制。
总结
HTML Drag and Drop API 为Web应用程序带来了强大的交互能力，尤其是在处理文件信息时。通过本文介绍的方法，你可以轻松地在Web应用中实现文件拖放，并提取文件的名称，而无需进行实际的文件上传。然而，作为开发者，理解浏览器安全模型对文件路径的限制至关重要。始终记住，出于用户隐私和安全考虑，浏览器不会向Web应用暴露本地文件的完整路径。在设计应用时，应充分考虑这些限制，并寻找符合安全规范的替代解决方案。
以上就是HTML Drag and Drop：本地文件名获取而非文件上传的实现的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1592274.html
微信扫一扫 
支付宝扫一扫 
