拖拽上传event.dataTransfer.files始终为空

最新推荐文章于 2025-06-09 14:48:16 发布
最新推荐文章于 2025-06-09 14:48:16 发布
阅读量1.8k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： html js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang740209668/article/details/116862063
博主发现了一个关于drag-and-drop事件的意外：console.dir(event.dataTransfer)显示files长度为0，但实际event.dataTransfer.files却包含文件信息。本文揭示了这一console输出差异的真相。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这是一个bug，当我console.dir(event.dataTransfer);时，显示files的length为0，这让我一直以为没有获取到拖拽的文件，然而当我console.dir(event.dataTransfer.files);时，却显示我拖拽的文件信息。如下图：
在这里插入图片描述

Drop Api ClipboardEvent 和 DataTransfer
aXin_li的博客
12-11 1216
在一个拖拽操作*中，*每一个 drag event 都有一个dataTransfer 属性，它包含一个存有拖拽数据的 list ，其中每一项都是一个 DataTransferItem。此方法不会从拖动操作中删除文件，因此如果有任何文件包含在对象的 DataTransfer.types 列表中，仍然可能有一个类型为“Files”的条目在拖动。** DataTransferItemList ** 只有一个属性 ** length** ， 表示列表中拖动项的数量。包含数据传输中可用的所有本地文件的列表。
dataTransfer.getData()在dragover,dragenter,dragleave中无法获取数据的问题
weixin_30657999的博客
05-15 1331
做拖拽相关效果时，想在ondragover时给被拖拽元素添加一些样式，于是在dragover事件的函数中通过dataTransfer.getData()获取在dragstart中设置的数据，然而发现dataTransfer.getData()所返回的数据为空。 查询资料发现dataTransfer.setData()中所设置的数据是存储在drag data store中，而根据W3C标准...
拖拽上传获取上传文件信息,e.dataTransfer.files始终为空的解决方案
weixin_33968104的博客
05-24 5105
2019独角兽企业重金招聘Python工程师标准>>> ...
为什么文件拖拽上传时 dataTransfer.files 是空的？原来是这个坑！
最新发布
m0_69105544的博客
06-09 239
拖拽上传时控制台显示files为空但实际有值？这是浏览器事件对象的复用机制导致的！当你在事件回调中立即打印files变量，可以正常获取文件；但在控制台展开事件对象查看时，浏览器已清空了dataTransfer数据。关键点：1) 事件对象是复用资源；2) 控制台展开的是延迟获取的清除后状态；3) 必须立即保存files到变量使用。开发建议：实时保存files、不要依赖控制台展开数据、完成桌面文件拖拽测试。
拖拽上传获取上传文件信息,e.dataTransfer.files始终为空的解决方案 兼容ie
weixin_45410246的博客
07-19 1313
// eslint-disable-next-line no-undef fileTable1.ondrop = (e) => { const arr = [] const files1 = [] // eslint-disable-next-line no-undef 兼容ie arr.forEach.call(e.dataTransfer.files, function (file) { file...
Vue 通过drop事件监听获取files为空
HKing147的博客
03-10 699
Vue 通过drop事件监听获取files为空
web前端笔记：文件拖拽上传
AbuXiL的博客
07-01 694
html主要代码 $(‘div’).on({ dragenter: ()=>{}, dragover: ()=>{}, drop: ()=>{} }) // 设置被拖拽移动的内容可以放置在该标签上 event.originalEvent.dataTransfer.dropEffect = ‘move’ //获取到拖拽过来的资源 files = event.originalEvent.dataTransfer.files //设置图片路径 img.src = URL.createObject
electron e.dataTransfer.files 获取不到path路径
03-31
好的，我现在要解决用户提到的Electron中`e.dataTransfer.files`无法获取文件路径的问题。首先，我需要回忆一下Electron的文件拖拽处理机制。用户可能是在实现拖放功能时遇到了问题，比如在渲染进程中监听`drop`事件...
js 获取拖拽的文件e.dataTransfer.files，再通过invokeMethodAsync传递给后端[JSInvokable]，后端的代码怎么写
03-12
const files = e.dataTransfer.files; if (files.length > 0) { const file = files[0]; const reader = new FileReader(); reader.onload = async (event) => { const content = event.target.result.split...
拖曳上传文件&e.stopPropagation()阻止事件冒泡
weixin_46045444的博客
08-18 566
<style> p{text-align: right;position:relative;left:0%;width:35%;height:5%;top:5%} input{width:60%;color:dimgrey;text-align: center;} </style> <!--<div style="position:absolute;top:5%;width:100%">--> <p> 化合物编号（cid）：&l.
event.dataTransfer打印怎么看不到想要的数据！？
weixin_43811713的博客
10-27 830
又是被自己气死的一天，心情太难平复了，写个分享 一个vue+element的项目,写了一个el-tree，要拖动节点到树以外的地方，给el-tree绑上事件node-drag-start 节点开始拖拽时触发的事件. event.dataTransfer可以自行百度下， 在可以放置的div上设置@dragover和拖放事件@drop ，在handleDrop（event）可以打印event看看。拖过来的数据就在里面，使用event.dataTransfer.getData()可以获取到。 但是！！but
js实现文件拖曳上传
yanpingzaizai的博客
05-12 418
js实现文件拖曳上传 不足：只能获取拖曳文件的文件名，但获取不到路径 <!DOCTYPE html> <html> <head> <title></title> </head> <body> <div id="divFile"> <input type="text" id="txtFilePath" style="width:300px" readonly="readonly
拖拽上传，判断空文件夹
qq_41247805的博客
09-02 808
项目中碰到的需要，做一个类似svn的拖拽上传文件及文件夹，首先想到了vue-simple-uploader。 虽然插件很强大，但是如果时空文件夹或者文件夹中存在空文件夹就不会触发上传操作了，因为文件夹上传的本质也是文件上传，然后根据目录结构组成文件夹。 最后使用了原生的拖拽，监听放置drop事件，配合插件共同完成了项目的上传需求。
vue实现上传拖拽功能
qq_64069576的博客
06-20 1966
vue实现上传拖拽功能 首先让我们看看用到了那些属性 accept 一个 HTML 属性，用于指定可接受的文件类型或 MIME 类型，通常用于文件上传的 元素,用于限制用户在文件选择对话框中可以选择的文件类型或 MIME 类型。这有助于提供更好的用户体验，并在前端对文件类型进行初步筛选 change change 事件在表单元素的值发生改变时被触发，可以用于处理用户对表单元素的交互操作,通常与表单元素（如 , , 等）一起使用。需要注意的是，change 事件通常在表单元素失去焦点（blur）时
event.dataTransfer 教程
wscfan的博客
06-06 909
event.dataTransfer是 HTML5 拖拽 API 的核心对象，它提供了在拖拽操作过程中传递数据的机制。无论是拖拽文本、图片、文件还是自定义数据，都需要通过这个对象来实现数据的存储和获取。
前端拖拽上传文件与文件夹的实现
weixin_63726940的博客
01-27 906
通过和文件上传：使用直接访问文件信息。文件夹上传：使用获取文件夹及其内部的文件，通过遍历文件夹内的所有文件。这种方式不仅提升了用户体验，而且简化了上传逻辑，让用户能够直观地将文件和文件夹拖拽到 Web 应用中。
唠唠 File API
TingYu168的博客
03-19 259
参考自JavaScript高级程序设计（第3版） 不能直接访问用户计算机中的文件，一直是Web应用开发中的一大障碍。很多年前，处理文件的唯一方式就是在表单中添加<input type="file">字段； File API的宗旨是为Web开发人员提供一种安全的方式，以便在客户端访问用户计算机中的文件，并更好地对这些文件执行操作； File API在表单中的文件输入字段的基础上...
前端如何直接上传文件夹
xinTianou123的博客
10-22 3879
我们经常看到一些网站支持直接选择整个文件夹上传，例如：宝塔面板、cloudflare托管、对象存储网站等等需要模拟文件路径存储文件的场景。那是怎么实现的呢？
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梧桐深院

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值