技术栈

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

大猫会长2023-08-28 15:42

至少阻止下列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

上一篇:appium+python自动化测试
下一篇:阿里云 MSE 助力开迈斯实现业务高增长背后带来的服务挑战
相关推荐
ObjectX前端实验室
几秒前
三年写了很多代码,也想写写自己
前端·程序员
满分观察网友z
5 分钟前
uniapp的navigator跳转功能
前端
江城开朗的豌豆
10 分钟前
Vue组件DIY指南:手把手教你玩转自定义组件
前端·javascript·vue.js
无奈何杨
13 分钟前
CoolGuard风控节假日完善,QLExpress自定义函数
前端·后端
CSR-kkk
34 分钟前
前端工程化速通——①ES6
前端·es6·速通
yt94832
39 分钟前
C#实现CAN通讯接口
java·linux·前端
前端小巷子
40 分钟前
Cookie与Session:Web开发中的身份验证与数据存储
前端·javascript·面试
小磊哥er
1 小时前
【前端工程化】前端开发中如何做一套规范的项目模版
前端
Wetoria
1 小时前
管理 git 分支时,用 merge 还是 rebase?
前端·git
热门推荐
01集群聊天服务器---MySQL数据库的建立02Java学习第十五部分——MyBatis03Coze扣子平台完整体验和实践(附国内和国际版对比)04《深入设计模式》模式结构汇总05使用Ruby接入实时行情API教程06扣子(coze)实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07基于odoo17的设计模式详解---单例模式08基于odoo17的设计模式详解---装饰模式09DeepSeek各版本说明与优缺点分析10Everything文件检索工具 几秒检索几百G的文件