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

相关推荐
Ai-_Man5 小时前
您您这可以把Microsofat Copilot的多个会话比如说。左侧的多个会话一次性导出吗?不是单条会话里面的多次会对话。AI导出鸭
javascript·人工智能·ai·小程序·电脑·copilot
特创数字科技6 小时前
一个纯本地运行的图片处理工具:压缩 / 裁剪 / 九宫格 / 圆角 / 滤镜 / 拼图 / 水印,终生使用
前端
IT_陈寒7 小时前
Vue的v-if和v-for混用居然是个天坑
前端·人工智能·后端
天衍四九-7 小时前
【无标题】
前端·spring boot·mysql·nginx·docker
广州华水科技7 小时前
2026年单北斗GNSS变形监测系统推荐榜单,解锁GNSS位移监测新高度
前端
xcyxiner7 小时前
DicomViewer24 修复编译bug(window test 失败)
前端·qt
linux_cfan8 小时前
videojs v10 源代码系列解读:34 · `createComposition`:类型安全的冲突检测
前端·安全
Bruce_Liuxiaowei9 小时前
网页版 DeepSeek “harness desktop“ WebGL 上下文创建失败排查实录
开发语言·javascript·webgl
utmhikari9 小时前
【AI原生】借助AI之力优化个人博客前端样式
前端·css·hexo·next·个人博客·ai-native·vibe coding