在前端开发中，文件上传是一个常见需求。随着浏览器 API 的不断进化，现在我们可以实现更灵活的文件交互方式。本文将总结出一个支持文件选择、文件夹选择、拖拽上传、粘贴上传的完整示例，涵盖现代文件操作的主流场景。
一、功能特性
1. 文件/文件夹选择方式
传统文件选择：通过按钮触发input[type=”file”]和multiple，支持多选文件
文件夹选择：使用webkitdirectory属性选择整个文件夹（需 Chrome 等 webkit 内核浏览器）
2. 拖拽上传
可拖拽文件 / 文件夹到指定区域
拖拽状态可视化（背景色变化）
支持跨窗口拖拽（如从文件资源管理器拖入浏览器）
3. 粘贴上传
支持Ctrl+V粘贴系统剪贴板中的文件（需浏览器支持 Clipboard API）
可粘贴单个文件或整个文件夹
4. 文件管理
实时显示已选文件列表
支持文件大小格式化（自动转换为 B/KB/MB 等单位）
点击文件条目直接下载
控制台输出文件数组
二、效果演示
文件选择/拖拽/粘贴示例demo
三、完整代码实现
文件选择/拖拽/粘贴示例
拖放文件或文件夹到这里（支持使用ctrl+v粘贴所复制的文件）
四、总结
方式
触发方式
技术实现
兼容性
文件选择
点击 “选择文件” 按钮
input[type=”file”] + multiple属性
基础功能
文件夹选择
点击 “选择文件夹” 按钮
webkitdirectory属性
webkit引擎
拖拽上传
拖放文件到虚线区域
拖拽事件（drop）+ 递归解析
标准 File API 支持
粘贴上传
复制文件后按Ctrl+V
粘贴事件（paste） + 剪贴板数据读取 + 递归解析
需浏览器支持 Clipboard API