如何在 Angular 中触发文件上传输入?

2024-01-08

如何在 Angular 4 中触发文件上传输入?我正在尝试,但它不起作用。

我必须单击 div 并触发输入类型按钮,而不是输入按钮。

应用程序.html:

<input id="custom-input" type="file" > 
<div (click)="myEvent(custom-input)">
    Click here to upload file
</div>

app.ts:

myEvent(event) {
    alert("event");
    event.nativeElement.click();
}

  1. 创建文件上传输入:
<input 
    hidden 
    type="file" 
    #uploader
    (change)="uploadFile($event)"
/>
  1. 创建一个按钮来触发文件输入的单击:
<button (click)="uploader.click()">
    Upload
</button>

然后在你的组件中你可以使用$event:

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

如何在 Angular 中触发文件上传输入? 的相关文章

随机推荐

  • 在不活动的情况下以编程方式停止 AWS EC2

    当开发环境中没有活动 例如 2 小时不活动后 时 我们是否可以停止开发环境的 AWS Windows Server EC2 实例 我无法确定是否有任何用户虚拟连接到服务器 我可以轻松地以编程方式在固定时间启动 停止 EC2 但为了降低服务器
  • 如何在堆栈上分配具有灵活数组成员的结构

    假设我们有一个以灵活数组成员结尾的结构 struct foo size t len uint8 t data 如何在堆栈上分配这个结构 即内存在作用域结束时自动释放 另外 如果len可以包含字段的大小data 目前 我做的事情如下 uint
  • 为什么 if [ ...某事... ];然后回显“退出状态是$?”总是发出 0?

    在 bash 中输出退出状态的正确方法是什么 据我所知 退出状态由 对应于最后执行的命令的状态 正在处理的脚本对作为参数提供的文件进行一些条件检查 例如 检查是否有任何文件被命名或文件是否存在 所以我有这样的条件语句 if eq 0 the
  • Kotlin 高阶函数组合

    我试图弄清楚如何在 Kotlin 中将一个函数声明性地定义为其他两个函数的组合 但我正在努力 这是我的代码 fun compose a Int Int gt Int b Int Int gt Int Int return a invoke
  • 如何从带有 url 的网页读取 Open Graph 和元标记

    我希望我的网站能够在用户将链接粘贴到邮箱时提取有关网页的信息 类似于 Facebook 我想知道像 Google Reddit 和 Facebook 这样的网站如何能够仅通过 URL 来检索缩略图 标题和描述 有人知道他们是如何做到这一点的
  • WordPress 表单未提交

    您好 我对 WordPress 非常陌生 根据我的要求 我在 WordPress 主题中创建了几个 php 文件 其中detailsform php包含
  • 如何通过 MongoDB PHP 中的嵌入项查找文档

    我在 MongoDB 中有下一个文档 竞赛文件 id ObjectId 502aa915f50138d76d11112f7 contestname Contest1 description java programming contest
  • JavaScript 可以连接 MySQL 吗?

    JavaScript 可以连接 MySQL 吗 如果是这样 怎么办 如果没有某种桥接器 客户端 JavaScript 无法访问 MySQL 但上面关于 JavaScript 只是一种客户端语言的大胆说法是不正确的 JavaScript 可以
  • Android:GridLayout 大小和 View.GONE 行为

    I want to make a GridLayout that when one of it s children s Visibility is set to GONE it is replaced by the next child
  • 将变量传递给 JavaScript 对象

    你能帮我解决我的问题吗 我有以下 JavaScript 对象 var data rows 0 name foshka rows 0 tel 096 rows 0 opt none 问题是我在尝试将变量作为行索引传递时收到错误 var i 0
  • 如何在 PowerShell 中获取数字 HTTP 状态代码

    我知道有一个几个好方法 http scriptolog blogspot com 2007 08 query http status codes and headers html在 PowerShell 中构建 Web 客户端 NET 类
  • 如何在 GEKKO GUI 中显示解决方案?

    我想探索 GEKKO Web GUI 用于可视化结果的功能 如中所述https www researchgate net publication 326740143 GEKKO optimization suite https www re
  • 为什么 Darwin 的 strtod 线程不安全?

    以下测试总是在我的 Intel Mac Mini 上产生故障或总线错误 编译器 uname a Darwin vogon13 9 8 0 Darwin Kernel Version 9 8 0 Wed Jul 15 16 55 01 PDT
  • 用 C++ 构建最小的 VST3 主机

    我正在努力寻找有关如何使用 VST 3 x SDK 设置最小插件主机的基本示例 官方文档绝对是简明扼要的 我无法得到任何地方 我想 了解最小的设置 所需的标头 要实现的接口 加载 VST3 插件 暂时没有花哨的 GUI 打印出一些数据 例如
  • gitignore 无法与 Visual Studio 一起使用

    我正在尝试将我的项目更改从使用 Visual Studio 2017 的 C 项目提交并推送到我的私有 gitea 存储库 不幸的是 构建输出 如 bin debug 以及 VS 缓存文件夹 vs 始终被添加到更改列表中 当我输入 git
  • Golang:如何使用 DES、CBC 和 PKCS7 解密?

    目前正在尝试找出为什么我的解密方法不起作用 我使用 DES CBC 和 PKCS7Padding 来加密我的字符串 我现在的code https play golang org p FZN6POxqU8输出panic crypto ciph
  • SQL:连接两个表,其中列为空

    我正在使用mysql数据库 我有两个表错误和配置文件 Bugs 表有两列 signed to qa contact 通过多对一关系指向配置文件 这些是我的查询的简化版本 首先 我试图这样做 但它返回重复的行 其中 bugs 表中 qa co
  • 在 Windows 的 virtualenv 中安装 lxml

    我最近开始使用 virtualenv 并且想在这个隔离环境中安装 lxml 通常我会使用 Windows 二进制安装程序 但我想在此 virtualenv 中使用 lxml 不是全局 Pip install 不适用于 lxml 所以我不知道
  • Entity Framework Core Linq 查询来过滤相关实体

    我已经弄清楚如何在使用 Include 时编写通过 Entity Framework Core 过滤相关实体的查询很长时间 假设我有以下两个类 public class Order public int OrderId get set pu
  • 如何在 Angular 中触发文件上传输入?

    如何在 Angular 4 中触发文件上传输入 我正在尝试 但它不起作用 我必须单击 div 并触发输入类型按钮 而不是输入按钮 应用程序 html