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

发布时间：2020-12-14 18:55:47 所属栏目：资源来源：网络整理

导读：有一个 HTML文本区.当本地文件被拖放到文本区域时,我可以捕获该事件.但是如何获取丢弃文件的名称？ (最后修改并插入到textarea中) 在这种情况下,以下表达式返回None： event.dataTransfer.filesevent.dataTransfer.getData('text/plain') 我为目前的平台Fire

有一个 HTML文本区.当本地文件被拖放到文本区域时,我可以捕获该事件.但是如何获取丢弃文件的名称？ (最后修改并插入到textarea中)

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

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

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

<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>

解决方法

这有点迟了 – 但我想你正在寻找的是这样的：

event.dataTransfer.files[0].name

您还可以获得以下属性：

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

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

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!