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

时间：2023-04-29

本文介绍了使用 HTML/JavaScript 检测本地文件拖放的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

限时送ChatGPT账号..

有一个 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.)

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

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 + '
';
}

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

Btw - if you are using jQuery then the dataTransfer object can be found here:

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

这篇关于使用 HTML/JavaScript 检测本地文件拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！

上一篇：在 Firefox 和 IE 中，如何在拖动不同目标时更改光 下一篇：如何让 clientX 和 clientY 在我的“拖动"中工作

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

问题描述

推荐答案

相关文章

最新文章