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

相关推荐
澄江静如练_2 分钟前
优惠券提示文案表单项(原生div写的)
前端·javascript·vue.js
C_心欲无痕6 分钟前
ts - 关于Object、object 和 {} 的解析与区别
开发语言·前端·javascript·typescript
L Jiawen12 分钟前
【Windows 系统】Chrome浏览器退出登录状态失效
前端·chrome·windows
IT_陈寒25 分钟前
Java并发编程实战:从入门到精通的5个关键技巧,让我薪资涨了40%
前端·人工智能·后端
Irene199126 分钟前
Vue2 与 Vue3 响应式实现对比(附:Proxy 详解)
vue.js·响应式实现
全栈前端老曹26 分钟前
【包管理】read-pkg-up 快速上手教程 - 读取最近的 package.json 文件
前端·javascript·npm·node.js·json·nrm·package.json
程序员爱钓鱼1 小时前
Node.js 编程实战:测试与调试 —— 调试技巧与性能分析
前端·后端·node.js
JQLvopkk1 小时前
Vue框架技术详细介绍及阐述
前端·javascript·vue.js
vyuvyucd1 小时前
插件式开发:C++与C#实战指南
java·前端·数据库
C_心欲无痕1 小时前
ts - 类型收窄
前端·typescript