HTML5拖拽API实现元素交互与文件上传需设draggable="true"，在dragstart存数据、dragover阻止默认行为、drop中处理；拖入图片用FileReader转base64预览；上传则用FormData配合fetch；辅以视觉反馈、文件校验及input降级。

用HTML5拖拽API实现元素交互和文件拖拽上传，核心在于正确监听事件、阻止默认行为、读取数据并处理。不需要额外插件，现代浏览器基本都支持。

让元素可拖拽并移动到目标区域

要拖动一个DOM元素（比如一张图片或一个div），必须显式设置 draggable="true"，再配合 dragstart 和 drop 事件完成数据传递与位置更新：

• 给源元素加 draggable="true" 属性，否则无法触发拖拽事件
• 在 dragstart 中调用 event.dataTransfer.setData() 存入标识信息（如ID或文本）
• 目标容器需监听 dragover 并立即执行 event.preventDefault()，否则 drop 不会触发
• 在 drop 里用 getData() 取出数据，再做追加、替换或样式变更等操作

拖入图片/文件并实时预览

用户把本地图片直接拖进网页区域，不点选、不弹窗，体验更自然。关键是从 dataTransfer.files 获取 File 对象，再用 FileReader 读取为 base64：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• drop 事件中调用 event.preventDefault() 阻止浏览器默认打开图片
• 从 event.dataTransfer.files 拿到 FileList，遍历检查 .type.startsWith('image/')
• 对每个合法图片创建 FileReader，用 readAsDataURL() 转成 data URL
• onload 触发后，把结果赋值给 或插入缩略图容器

拖拽后上传到服务器

预览只是前端动作，真正上传需要构造 FormData 并用 fetch 或 XMLHttpRequest 发送到后端接口：

• 从 dataTransfer.files 提取文件，过滤掉非图片或超大文件（例如 >10MB）
• 新建 FormData 实例，用 append('file', file) 添加单个或多个文件
• 发起 fetch('/upload', { method: 'POST', body: formData })
• 建议添加 loading 状态提示，并捕获 catch 错误，显示“上传失败”或具体原因

增强体验的小细节

光能用还不够，用户需要明确的视觉反馈和容错能力：

• 在 dragenter 时给目标区域加高亮边框或背景色，dragleave 时还原
• drop 后清空 dataTransfer，避免重复提交（尤其多文件场景）
• 限制文件类型和大小，提前拦截非法输入，减少无效请求
• 移动端不支持桌面级拖拽，记得保留 作为降级方案

大量免费API接口：立即使用
涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。免费API接口可安全、合规地连接上下游，为数据API应用能力赋能！