html5拖拽文件上传需阻止默认事件

至少阻止下列3个事件的默认行为才能实现文件拖拽上传

复制代码
var b=document.getElementById('box')
b.ondragenter=(e)=>{
  e.preventDefault()
  console.log('======aaa',e.dataTransfer.files);
}
b.ondragover=(e)=>{
  e.preventDefault()
  console.log('======bb',e.dataTransfer.files);
}

b.ondrop=(e)=>{
  e.preventDefault()
  console.log('======e',e.dataTransfer.files);
}

参考

文件上传方式之拖拽上传【渡一教育】_哔哩哔哩_bilibili

相关推荐
虹科网络安全13 小时前
艾体宝新闻|从 SQL 注入到服务器接管:CVE-2026-57517 暴露 Web 管理面板的供应链与安全编码风险
服务器·前端·sql
糖果店的幽灵13 小时前
langgraph的四种state解析
java·前端·javascript·langgraph
顺颂时绥_113 小时前
前端大图片压缩与安卓/苹果设备矫正实践
前端
Allshadow13 小时前
Nest.js - 目录结构
javascript·nestjs
Csvn13 小时前
JSON.parse 大数精度丢失:一个让前后端互相甩锅的 Bug
前端
Simon_He13 小时前
AI 对话里的流式 Markdown 为什么难:从不完整 Token 到增量渲染
vue.js
张元清13 小时前
React useCookie Hook:把 Cookie 变成响应式状态(2026)
javascript·react.js
达子66613 小时前
第4章_图解HarmonyOS 的结构
vue.js
Helen_cai14 小时前
OpenHarmony 项目统一全局样式、尺寸、色彩主题封装 ThemeUtil(API23)
开发语言·前端·javascript·华为·harmonyos
郑州光合科技余经理14 小时前
家政O2O平台解析:从0搭建上门预约小程序解决方案
android·java·开发语言·前端·小程序·架构·php