用HTML / JavaScript检测本地文件拖动 [英] Detecting local file drag'n'drop with HTML/JavaScript
问题描述
有一个HTML文本区域。当本地文件被拖放到文本区域时，我可以捕获该事件。但是如何获取删除文件的名称？（要修改并最终插入到textarea中。）
There is a HTML textarea. I'm able to catch that event when a local file is dragged and dropped onto the textarea. But how to obtain the name of the dropped file? (To be modified and inserted into the textarea finally.)
以下表达式返回无在这种情况下：
The following expressions returns None in that case:
event.dataTransfer.files
event.dataTransfer.getData('text/plain')
我作为我目标平台的 Firefox 3 的一个简短例子。
I made a short example for Firefox 3 that is my target platform currently.
<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>
推荐答案
这有点晚 - 但我想你正在寻找的是：
This is a bit late - but I think what you are looking for is this:
event.dataTransfer.files[0].name
您还可以获得以下属性：
You can also get the following properties:
event.dataTransfer.files[0].size
event.dataTransfer.files[0].type
你可以通过以下这些文件循环：
And you can loop thru these files with the following:
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对象：
Btw - if you are using jQuery then the dataTransfer object can be found here:
event.originalEvent.dataTransfer.files[0].name
这篇关于用HTML / JavaScript检测本地文件拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
