h5文件上传拖拽提示层需监听dragenter、dragover、dragleave、drop事件，阻止默认行为，用css实现半透明悬浮层并防误触边界问题。

在 H5 中实现文件上传组件的拖拽悬浮提示层（即用户将文件拖入页面区域时显示半透明高亮层和文字提示），核心是监听 dragenter、dragover、dragleave 和 drop 这四个拖放事件，并动态控制提示层的显隐与样式。

监听拖放事件并阻止默认行为

浏览器对文件拖入有默认行为（如打开文件），必须在 dragover 和 dragenter 事件中调用 event.preventDefault()，否则无法触发 drop。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• dragenter：文件首次进入目标区域时触发，适合显示提示层
• dragover：持续触发（高频），仅用于阻止默认行为，不宜在此做 DOM 操作
• dragleave：文件移出目标区域时触发，适合隐藏提示层（注意嵌套子元素会误触发，需加边界判断）
• drop：文件释放时触发，获取 event.dataTransfer.files 并执行上传逻辑，之后记得隐藏提示层

用 CSS 实现悬浮提示层效果

提示层通常是一个绝对定位、全屏覆盖上传区域的半透明层，带图标和文字。推荐用伪元素或独立 <div> 实现，避免影响原有布局。 <ul> <li>设置 <code>pointer-events: none 让提示层不拦截鼠标事件

用 backdrop-filter: blur(4px) 做毛玻璃效果（现代浏览器支持）

添加 transition: opacity 0.2s 实现淡入淡出，提升体验

文字居中建议用 display: flex + align-items/justify-content: center

防误触与边界处理（关键细节）

dragleave 在子元素间移动也会触发，直接隐藏会导致“闪退”。正确做法是检测是否真的离开了整个上传容器：

• 在 dragenter 中记录当前目标元素（event.target）
• 在 dragleave 中检查 event.relatedTarget 是否仍在容器内（用 contains() 判断）
• 只有当 relatedTarget === null 或不在容器内时，才隐藏提示层

结合 input[type="file"] 隐藏原生控件

拖拽只是交互方式，最终仍需通过 <input type="file"> 获取文件对象。可将其 opacity: 0 + position: absolute 覆盖在提示层下，或用 label 关联，点击提示层也能唤起文件选择框。

• 拖拽成功后，可调用 input.files = dataTransfer.files（注意该属性只读，实际需用 FileList 构造或 FormData 上传）
• 更稳妥的做法是直接从 event.dataTransfer.files 读取，不依赖 input 元素