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

2023-11-23

有一个 HTML 文本区域。我能够在以下情况下捕获该事件:本地文件被拖放到文本区域上。但如何获取删除的文件名?(最后修改并插入到文本区域中。)

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

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

我做了一个简短的例子火狐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 + '\r\n';
}

顺便说一句 - 如果您使用 jQuery,则可以在此处找到 dataTransfer 对象:

event.originalEvent.dataTransfer.files[0].name
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 HTML/JavaScript 检测本地文件拖放 的相关文章

随机推荐

  • 逐行测试多个(并非所有)列是否相等

    我想按行检查多列是否全部相等 我想出了一种复杂的方法来计算每组每个值的出现次数 但这似乎有些 麻烦 样本数据 sample df lt data frame id letters 1 6 group rep c r l 3 stringsA
  • 比较两个音频文件[重复]

    这个问题在这里已经有答案了 基本上 我有很多代表同一首歌的音频文件 然而 有些歌曲的质量比原曲差 有些经过编辑 与原曲不再相符 我想做的是以编程方式将这些音频文件与原始音频文件进行比较 看看哪些音频文件与该歌曲匹配 无论质量如何 直接比较显
  • 加载 MySQLdb 模块时出错“您安装了 mysqlclient 还是 MySQL-python?”

    我正在使用 Windows 10 命令行使用 python34 进行 django 项目 但是 我在 SQL 方面遇到了困难 我已经使用安装了 mysqlclientpip install mysqlclient 1 3 5并找到了该文件以
  • 检查 Python 字典列表中是否已存在值?

    我有一个 Python 字典列表 如下所示 a main color red second color blue main color yellow second color green main color yellow second c
  • 没有名为“tensorflow.keras.layers.experimental.preprocessing”的模块

    代码下面 import numpy as np np random seed 0 from sklearn import datasets import matplotlib pyplot as plt matplotlib inline
  • 位域,为什么要特定于实现?

    C C 位域似乎在硬件驱动程序和二进制网络传输中有很多应用 然而 它们似乎没有被广泛使用 并且通常不被鼓励 因为实际的二进制布局是特定于实现的 如 C99 标准 6 7 2 1 10 结构和联合说明符 中的引用所示 实现可以分配足够大的任何
  • removefromsuperview是否释放scrollview的对象?

    for UIView subview in scrollView subviews NSLog subviews Count d scrollView subviews count subview release subview remov
  • 如何让图标出现在新窗口中?

    我正在打开一个新窗口 向其中注入正文和头部的 HTML 问题出在标题部分 HTML 包含标题和图标 但图标不显示 这是代码和 jsFiddle https jsfiddle net ufnjspgc function Start TheBu
  • 如何告诉 LLDB 将信号传递给程序

    我在 lldb 中为安装在 MacOS 上的基于 C 语言的应用程序设置了很多断点 断点大多设置在应用程序的同一函数中 然而 第二天我回到应用程序继续处理它 并开始在同一个函数中再次设置断点 出现了一个问题 断点不是发生在应用程序函数内部
  • React Native:如何在 Android 和 iOS 中打开操作系统设置?

    我正在开发一个mobile应用程序使用反应本机我想在其中打开移动设备的settings当用户clicks在特定按钮上 我已经经历了docsRN 但仍然找不到任何可以帮助我实现同样目标的东西 有人可以吗guide我也一样 请问如何实施 谢谢
  • java 当鼠标点击时画一个圆

    我正在编写一个程序 当单击鼠标时 将绘制一个圆圈 以下是我到目前为止编写的代码 import java awt import javax swing import java awt event ActionEvent import java
  • 多模块项目中的 Maven 测试依赖关系

    我使用 Maven 构建一个多模块项目 我的模块 2 依赖于编译范围内的模块 1 src 以及测试范围内的模块 1 测试 模块 2
  • android studio logcat 删除日期、进程信息

    最近一次 Android Studio 更新后 目前我运行的是 3 1 2 logcat 开始间歇性地删除时间戳和 PID 信息 05 01 13 26 03 962 12909 12909 com perinote perinote D
  • 为什么“summarize”会删除一个组?

    我在胡闹babynames pkg A group by命令有效 但之后summarize 其中一个组将从组列表中删除 library babynames babynames 1 10000 gt group by year name gt
  • D3.js线性回归

    我搜索了一些有关构建线性回归的帮助 并在这里找到了一些示例 非线性回归函数还有一些应该涵盖这一点的 js 库 但不幸的是我无法使它们正常工作 简单统计 js和这个 回归 js With regression js我能够得到m and b线的
  • Android:注册意图过滤器以使用我的应用程序打开电子邮件附件

    我有一个可以生成自定义文件类型 sor 的应用程序 在应用程序内部 我有一个功能可以发送附有这些文件之一的电子邮件 我还有一个意图过滤器 允许应用程序显示在可以打开此类文件的应用程序列表中 这使我 有时 可以直接从手机上的用户电子邮件客户端
  • 强类型数据集与弱类型数据集

    Net 中的强类型数据集是什么意思 有人可以用一个清晰 而简短的例子来解释吗 另外 强类型数据集和弱类型数据集之间有什么区别 强类型数据集基于 Db Schema 生成 它们由从 DataSet DataTable 和 DataRow 派生
  • Django TestCase 不使用辅助数据库上的事务

    我正在使用 Django 1 3 1 我有两个数据库 我的一些模型位于一个数据库中 一些模型位于另一个数据库中 这两个数据库都是 contrib gis db backends postgis 数据库 令我惊讶的是 Django 的 Tes
  • GWT:如何避免在生成的JavaScript代码中调用dynamicCast和canCastUnsafe?

    我正在用 Java 编写一些特殊用途的数据结构 旨在在浏览器中使用 使用 GWT 编译为 JavaScript 我正在尝试匹配一些内置 JDK 类的性能 我注意到运行速度相当快 但是当我将我的代码跟踪与一些模拟的 JDK 代码进行比较时 我
  • 使用 HTML/JavaScript 检测本地文件拖放

    有一个 HTML 文本区域 我能够在以下情况下捕获该事件 本地文件被拖放到文本区域上 但如何获取删除的文件名 最后修改并插入到文本区域中 在这种情况下 以下表达式返回 None event dataTransfer files event