本教程详细介绍了如何利用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()。
立即学习“前端免费学习笔记（深入）”；
构建拖放区域：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 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;
}
