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

相关推荐
扑棱蛾子7 分钟前
前端代码一键打包上传服务器?10分钟配好永久告别手动部署!
前端·node.js
apollo_qwe8 分钟前
Set 和 Map常用场景代码片段
javascript
q***T58315 分钟前
前端路由懒加载实现,React与Vue
前端·vue.js·react.js
灵犀坠20 分钟前
前端开发核心知识:HTML5特性与经典面试题详解
前端·html·html5
Hilaku20 分钟前
我为什么说全栈正在杀死前端?
前端·javascript·后端
8***B30 分钟前
前端性能优化插件,图片懒加载与压缩
前端
木易士心40 分钟前
Vue2 和 Vue3 中 watch 用法和原理详解
前端·vue.js
Harlen1 小时前
Cesium.js基本使用
前端
拿不拿铁191 小时前
Webpack 5.x 开发模式启动流程详解
前端
程序猿_极客1 小时前
【期末网页设计作业】HTML+CSS+JS 旅行社网站、旅游主题设计与实现(附源码)
javascript·css·html·课程设计·期末网页设计