用HTML / JavaScript检测本地文件拖动

前端之家收集整理的这篇文章主要介绍了用HTML / JavaScript检测本地文件拖动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有一个 HTML文本区.当本地文件被拖放到文本区域时,我可以捕获该事件.但是如何获取丢弃文件名称? (最后修改并插入到textarea中)

在这种情况下,以下表达式返回None:

@H_404_4@event.dataTransfer.files event.dataTransfer.getData('text/plain')

我为目前的平台Firefox 3提供了一个简短的例子.

@H_404_4@<script> function init() { document.getElementById('x').addEventListener('drop',onDrop,true) } function onDrop(event) { var data = event.dataTransfer.getData('text/plain') event.preventDefault() alert('files: ' + event.dataTransfer.files + ' && data: ' + data + '.') } </script> <body onload='init()'> <textarea cols=70 rows=20 id='x'></textarea>

解决方法

这有点迟了 – 但我想你正在寻找的是这样的: @H_404_4@event.dataTransfer.files[0].name

您还可以获得以下属性

@H_404_4@event.dataTransfer.files[0].size event.dataTransfer.files[0].type

您可以通过以下文件循环访问这些文件

@H_404_4@var listOfNames=''; for(var i=0,tot=event.dataTransfer.files.length; i<tot; i++){ listOfNames+=event.dataTransfer.files[i].name + '\r\n'; }

Btw – 如果你使用jQuery,那么可以在这里找到dataTransfer对象:

@H_404_4@event.originalEvent.dataTransfer.files[0].name

猜你在找的HTML相关文章