如何重置ReactJS文件输入

2024-03-13

我有文件上传输入:

<input onChange={this.getFile} id="fileUpload" type="file" className="upload"/>

我这样处理上传:

getFile(e) {
    e.preventDefault();
    let reader = new FileReader();
    let file = e.target.files[0];
    reader.onloadend = (theFile) => {
        var data = {
            blob: theFile.target.result, name: file.name,
            visitorId:  this.props.socketio.visitorId
        };
        console.log(this.props.socketio);
        this.props.socketio.emit('file-upload', data);
    };
    reader.readAsDataURL(file);
}

如果我上传同一文件两次,则不会触发上传事件。我该如何解决这个问题?对于简单的 js 代码,执行以下操作就足够了: this.value = null;在更改处理程序中。我怎样才能用ReactJS做到这一点?


我认为你可以像这样清除输入值:

e.target.value = null;

文件输入无法控制,没有 React 特定的方法可以做到这一点。


Edit对于旧浏览器(以下技术之一.

See http://jsbin.com/zurudemuma/1/edit?js,输出 http://jsbin.com/zurudemuma/1/edit?js,output(在 IE10 和 9 上测试)

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

如何重置ReactJS文件输入 的相关文章

  • 如何使用函数组件和 React Router v5 拦截 React SPA 中的后退按钮

    我正在 React 中的 SPA 中工作 不使用 React Router 来创建任何路由 我不需要允许用户导航到特定页面 想想多页调查问卷 按顺序填写 但是 当用户按下后退按钮时在浏览器上 我不希望他们退出整个应用程序 我希望能够在用户按
  • 猫头鹰轮播,制作自定义导航

    所以我有一个包含三张图像的猫头鹰旋转木马 我还在左侧和右侧添加了自定义导航箭头 png 图像 然而 这些箭头目前是无用的 因为我找不到一种方法来真正让它们在我的猫头鹰旋转木马的图像之间切换 我无休止地寻找 找不到解决方案 有任何想法吗 您需
  • 阻止 div 容器调整大小

    我的 html 页面中有两列 一列向右浮动 另一列向左浮动 我已将两个容器的高度设置为 100 将两个容器的宽度设置为 50 我希望这两个容器适合中间的窗户 当用户水平调整窗口大小时 我不希望内容调整大小 我怎样才能做到这一点 Thanks
  • 如何让 GreaseMonkey 脚本在页面中的元素显示之前对其产生影响?

    我试图确保不显示某个网站中的图像 但仍显示替代文本 最初 我尝试使用 Stylish 使用 Firefox 来完成此任务 并提出了以下问题 如何强制显示图像的替代文本而不是图像 https stackoverflow com questio
  • 通过 AJAX jquery 更改表格背景颜色?

    设想 当我的网页加载时 自动搜索单元格已由用户输入并且具有价值 如果已输入 表格背景颜色将为红色 否则为绿色 假设该表尚未输入 桌子背景绿色是这样的 和表的源代码 table width 1023 height 200 border 1 t
  • Webix 树节点的 Font Awesome 图标

    Webix 与 Font Awesome 集成 http docs webix com desktop icon types html 但是如何使用 Font Awesome 图标代替树中的默认文件夹 文件图标来设置各个节点的样式呢 这是我
  • 为什么在 ES6 中不应该使用 import all

    所以我最近开始学习 React 并注意到所有文档都有类似的导入 import Apples Bananas Oranges from fruits 但是在研究 React 时我发现这种语法也同样有效 import as Fruits fro
  • 有没有办法告诉你的反应应用程序页面何时完成加载页面/资产?

    我的反应应用程序中有一个脚本 我想在页面完全加载完成后运行该脚本 我尝试在 componentDidMount componentDidUpdate 中监听窗口加载 document onreadystatechange function
  • 音频标签的 Html5 惰性“onplay”事件处理程序?

    使用新的 Html5 音频标签 onplay 事件似乎仅在第一次播放音频时触发 在此示例中 当单击 播放 时 音频将开始并显示一个显示 正在播放 的警报弹出窗口 当音频结束并再次单击 播放 时 音频会再次开始 但不会触发警报 我在这里错过了
  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • HTML 表单未运行 (withSuccessHandler) 函数

    我在 Google App Script Sheets 中有一个 HTML 表单 它要求用户提供日期值 然后提交该值 HTML 表单运行 唯一的问题是 obj 不记录 我不明白这是为什么 HTML
  • 为什么只读输入字段无效

    考虑以下 html
  • 复合组件和 CSS

    I have newcss css formdiv width 30 margin 150 auto 和复合组件
  • React setState回调返回值

    我是 React 新手 我希望实现这种流程 set the state execute a function f an async one which returns a promise set the state again return
  • 如何创建显示/隐藏 Docusaurus 项目中所有详细标签状态的按钮?

    根据讨论here https stackoverflow com questions 58579048 how to add or remove the open attribute from all details tags in a r
  • JavaScript 中的安全数据

    我必须为 Web 测试创建生成器 使用 HTML 和 JavaScript 测试必须离线和在线进行 正确答案和分数评估必须是生成的测试的一部分 最终用户的分数仅发送到服务器 无法在服务器上进行评估 并且服务器对问题一无所知 它只保存最终分数
  • 无需画布/显示器即可拍摄隐形 WebRTC/视频照片

    我读了拍摄静态照片 https developer mozilla org en US docs Web API WebRTC API Taking still photos来自 MDN 的描述如何从网络摄像头捕获照片 使用视频元素和med
  • Django - 渲染到字符串无法加载 CSS

    我正在尝试使用 Django 1 8 render to string 通过管理命令将 html 转换为 pdf 而不是使用 View request 以下代码可以将模板转换为 pdf 但它无法将 CSS 加载到模板中 def html t
  • chrome css 动画上的抖动

    尝试使用两个具有相同背景图像 svg 的居中 div 制作一个从中心淡入图像的 css 动画 并为其宽度和背景位置设置动画 问题是 在 chrome 上 存在严重的抖动问题 也许是 chrome 循环执行动画步骤 而不是同时执行它们 这是j
  • 如何使用 React 制作垂直选项卡

    有人可以为我提供一种使用 React 创建垂直选项卡的方法吗 我尝试了各种npm包 如react web tabs reactstrap和react bootstrap 最后两个只有水平选项卡的示例 React web tabs在其文档中有

随机推荐

  • 间隔列表中范围不重叠间隔的最大总和

    有人问我这样的问题 您将获得一个间隔列表 您必须设计一种算法来找到不重叠间隔的序列 以使间隔范围的总和最大 例如 如果给定的间隔是 06 00 08 30 09 00 11 00 08 00 09 00 09 00 11 30 10 30
  • C# 快速/高效地压缩大量数据块

    我有大约 270k 个数据块对 每对由一个 32KiB 和一个 16KiB 块组成 当我将它们保存到一个文件时 我当然会得到一个非常大的文件 但数据很容易被压缩 用WinRAR对5 48GiB的文件进行强压缩后 得到的文件大小为37 4Mi
  • 如何在不破坏标签的情况下截断html?

    如何确保所有 html 标签都已关闭 出现问题是因为我想为每篇文章创建某种摘录 例如有人写了这样一篇文章 Hi everyone I m just an article and I have few strong tags strong i
  • MYSQL Docker 容器给出“未知数据库”错误

    我正在使用带有 docker compose 的 MySQL docker 容器 效果很好 唯一的问题是我收到错误unknown database database name 我每天第一次运行它 Windows启动后 之后 如果我停止它并重
  • IIS 5.1 中的 WCF 作为纯文本文件

    我刚刚在我的开发环境中设置了一个简单的 WCF 服务 到目前为止 对于 SOAP 和 JSONP 请求 端点工作正常 我已继续将此解决方案部署到托管在 IIS 5 1 上的临时服务器 我知道 但请耐心等待 并且 svc文件突然不再工作了 并
  • System.Uri 实现 ISerialized,但给出错误? [复制]

    这个问题在这里已经有答案了 可能的重复 如何 xml 序列化 uri https stackoverflow com questions 1036492 how to xml serialize a uri 据我所知Uri实现 ISeria
  • 添加迁移以在实体框架 6 中创建数据库时出错,找不到方法 CoreTypeMappingParameters

    我正在尝试运行添加迁移以在本地计算机上创建数据库 在最后几秒钟我收到此错误 找不到方法 Void CoreTypeMappingParameters ctor System Type Microsoft EntityFrameworkCor
  • IntelliJ IDEA Community Edition 可以以某种方式支持 Ultimate 的功能吗? [关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我知道社区版不支持 Ultimate 的某些功能 但我想知道无论如何都没有办法让这些功能运行 例如企业开发 如Tomcat Glassfi
  • 在 Python 中打开 .h5 文件

    我正在尝试用 Python 读取 h5 文件 该文件可以在以下位置找到这个链接 https github com yhilpisch py4fi tree master ipython source它被称为 vstoxx data 3103
  • 如何测量来自客户端的 Websocket 背压或网络缓冲区

    我正在使用 ws Node js 包创建一个到每秒发送数百条消息的服务器的简单 WebSocket 客户端连接 即使使用仅 console logs 传入消息的简单 onMessage 处理程序 客户端也无法跟上 我的理解是 这被称为背压
  • 在 C# 中创建动态扩展方法?

    是否可以解决此错误 public static class LayoutExtensions
  • 通过鼠标悬停定位工具提示

    我正在使用以下链接中找到的代码 https www d3 graph gallery com graph heatmap tooltip html https www d3 graph gallery com graph heatmap t
  • TemplateHaskell 和 IO

    如果 TH 的功能有副作用 是否有任何适当的方法可以确保它们的安全 比如说 我想要一个在编译时调用 git 并生成版本字符串的函数 LANGUAGE TemplateHaskell module Qq where import System
  • 在导航 goBack 上发送道具

    基本上我有三个屏幕 第一个是堆栈导航器 const stackNav createStackNavigator Main screen MainScreen navigationOptions navigation gt header nu
  • mvc c# jquery 如果记录存在则更新视图的一部分,否则更新表

    我正在寻求有关如何实现此功能的建议 像往常一样 我有一个带有编辑框的页面 用户在其中提交带有输入的页面 其唯一目的是将其保存到记录中 但是我想要做的 为了避免重复 是首先在表中搜索任何相似的记录 如果有任何相似的记录 我想将其返回给用户 在
  • MVVM 实现的问题:对所选项目的更改传播到列表,不希望这样

    所以我遇到了这个问题 希望你能帮忙解决 我正在使用 MVVM Light 作为框架编写 WPF 应用程序 在这种情况下 我有一个项目列表 并且 SelectedItem 绑定到用户可以在其中编辑项目的详细信息视图 在本例中 有一个 保存 按
  • jQuery 模糊事件未触发

    我是 jQuery 新手 所以我打赌我做错了什么 但我不明白为什么这个事件没有触发 我有一个 textarea 元素 由于正在接受数据的应用程序 需要在提交之前删除所有分隔符 我试图在文本区域失去焦点时进行清理 因此采用模糊方法 不幸的是
  • 读取 csv 时区错误

    经过几个小时的谷歌搜索后 我没有找到解决这个问题的方法 基本上当我跑步时read csv some file csv 函数来自readr包我收到以下错误 错误 未知 TZ UTC 并且 csv 未被读取 我读取 CSV 的唯一方法是这样 r
  • Django 管理员:有条件地设置 list_display

    是否有任何管理模型方法 如 get list display 或某种方式 我可以有一些条件来设置不同的 list display 值 class FooAdmin model ModelAdmin def get list display
  • 如何重置ReactJS文件输入

    我有文件上传输入