使用HTML/JavaScript检测本地文件拖放

Pav*_*sov 11 html javascript firefox drag-and-drop

有一个HTML textarea.当本地文件被拖放到textarea上时,我能够捕获该事件.但是如何获取被删除文件的名称?(最后要修改并插入textarea.)

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

event.dataTransfer.files
event.dataTransfer.getData('text/plain')
Run Code Online (Sandbox Code Playgroud)

我为目前的目标平台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>
Run Code Online (Sandbox Code Playgroud)

Jim*_*ery 13

这有点晚了 - 但我认为你在寻找的是:

event.dataTransfer.files[0].name
Run Code Online (Sandbox Code Playgroud)

您还可以获得以下属性:

event.dataTransfer.files[0].size
event.dataTransfer.files[0].type
Run Code Online (Sandbox Code Playgroud)

您可以使用以下内容循环访问这些文件:

var listOfNames='';
for(var i=0,tot=event.dataTransfer.files.length; i<tot; i++){
    listOfNames+=event.dataTransfer.files[i].name + '\r\n';
}
Run Code Online (Sandbox Code Playgroud)

顺便说一句 - 如果你使用的是jQuery,那么可以在这里找到dataTransfer对象:

event.originalEvent.dataTransfer.files[0].name
Run Code Online (Sandbox Code Playgroud)