选择文件:文件选择框的代码触发【极易版】【文件上传功能】

news2024/12/24 10:21:05

最近业务中遇到添加附件功能,点击对应元素,在特定条件下触发文件选择,然后将选中的文件上传到后台。
文件上传是使用阿里云实现的,这里主要说文件选择功能。也就是怎样添加附件到界面上。

一 简单实现——点击按钮触发图片选择框

首先想到的是input中的type=‘file’,可以触发文件选择,并且获取到文件列表。

<input type="file" id="file" multiple="multiple" @change="handleFile"></input>

这样界面上就会出现一个选择文件的按钮,点击按钮弹出文件选择框。
如果需求简单的话,在此基础上改改input按钮的样式,就可以完成一个文件选择功能了。
在这里插入图片描述
在handleFile方法中,我们可以获取file列表,将列表中的文件信息push到我们的变量中备用即可。

handleFile(val) {
  console.log(val.target.files[0].name); // 文件名字
  this.filesList.push(...val.target.files);
},

二 高级实现——使用代码触发图片选择框

但有事我们不需要固定的选择文件按钮,我们需要在一定条件下触发文件选择,这时就需要一点技巧了。
我们可以使用下面两种方式来创建一个隐藏的input文件选择器。

<--vue环境-->
<input v-show="false" type="file" id="file" multiple="multiple" @change="handleFile"></input>
<--通用环境-->
<input style="display: none;" type="file" id="file" multiple="multiple" @change="handleFile"></input>

在需要进行文件选择的时候,我们触发该隐藏元素的click事件即可。

<--vue环境-->
<input v-show="false" type="file" id="file" multiple="multiple" @change="handleFile"></input>
<div class="add_job_attach_subtitle" @click="addJobAttach">
  <img class="add_job_attach_subtitle_icon" src="@/assets/imgs/homework/add.png" />
  <div>添加作业附件</div>
</div>

打开界面,可以看到界面中input按钮是不展示的,只展示下面添加作业附件的元素。
然后我们在下面元素的点击事件——addJobAttach方法中触发input按钮的click事件。

addJobAttach() {
  document.getElementById("file").click();
},

可以看到文件选择框正常弹出了。

在这里插入图片描述
input框的change事件——handleFile方法仍然会原样触发,我们在里面获取文件列表即可。

这里实际上是采取的取巧的方式去实现,如果你又更好的方式,可以在评论区给出。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1039091.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【linux】实现shell

自我名言&#xff1a;只有努力&#xff0c;才能追逐梦想&#xff0c;只有努力&#xff0c;才不会欺骗自己。 喜欢的点赞&#xff0c;收藏&#xff0c;关注一下把&#xff01; 如果发现内容有不对的地方欢迎在评论区批评指正&#xff0c;这是对我最大的鼓励&#xff01;&#xf…

对于现代互联网企业来说Python数据分析有什么用?

我们每一个人&#xff0c;每天无时无刻都在生产数据&#xff0c;一分钟内&#xff0c;微博上新发的数据量超过10万&#xff0c;b站的视频播放量超过600万……这些庞大的数字&#xff0c;意味着什么&#xff1f;意味着每天需要大量的人员要对这些数据进行分析&#xff0c;筛选有…

ssm+vue的教室信息管理系统(有报告)。Javaee项目,ssm vue前后端分离项目。

演示视频&#xff1a; ssmvue的教室信息管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;ssm vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层体系结构&…

OpenHarmony应用开发涉及的主要因素与UX设计规范

一、OpenHarmony应用开发涉及的主要因素 二、OpenHarmony应用开发UX设计规范 UX设计规范的主要内容与部分图标示例 2.OpenHarmony应用设计原则 设计原则&#xff0c;当为多种不同的设备开发应用时&#xff0c;有如下设计原则&#xff1a; 差异性&#xff0c;充分了解所要支…

LinearLayout里子view点击,其他空白间隙处禁止点击

LinearLayout里子view点击&#xff0c;其他空白间隙处禁止点击 经过不断摸索终于实现了。 像头条里黄色区域禁止点击实现。 可以通过在父 LinearLayout 上设置 android:clickable"true" 属性来实现&#xff0c;然后在子 View 上设置 android:clickable"false&…

1688-阿里巴巴批发网(获取商品的名称,价格,图片)

1688 item_get-获得1688商品详情 为了进行电商平台 的API开发&#xff0c;首先我们需要做下面几件事情。 1&#xff09;开发者注册一个账号 2&#xff09;然后为每个1688 应用注册一个应用程序键&#xff08;App Key) 。 3&#xff09;下载1688 API的SDK并掌握基本的API基础…

红海云签约中材叶片,科技引领风电叶片行业人力资源数字化转型

中材科技风电叶片股份有限公司&#xff08;以下简称“中材叶片”&#xff09;隶属于世界500强央企集团——中国建材集团&#xff0c;是专业的风电叶片设计、研发、制造和服务提供商&#xff0c;致力于打造最为客户尊重与员工、股东信赖的具有全球竞争力的世界一流风电叶片企业。…

Spring Cloud阿里的nacos注册中心的使用 Feign远程调用 nacos配置中心的简单使用

原文档 注册中心 https://github.com/alibaba/spring-cloud-alibaba/blob/2022.x/spring-cloud-alibaba-examples/nacos-example/nacos-discovery-example/readme-zh.md 配置中心 https://github.com/alibaba/spring-cloud-alibaba/blob/2022.x/spring-cloud-alibaba-example…

XSAN数据恢复-XSAN迁移数据过程中误格式化存储系统的数据恢复案例

XSAN数据恢复环境&#xff1a; 昆腾存储&#xff0c;MAC OS操作系统&#xff0c;划分了9个数据卷&#xff08;1个META信息卷&#xff0c;8个DATA信息卷&#xff09;&#xff0c;存放视频类数据&#xff0c;MXF、MOV等格式文件。 XSAN故障&分析&#xff1a; 将存储空间从XS…

力扣337.打家劫舍3(树形dp)

题目描述&#xff1a; 小偷又发现了一个新的可行窃的地区。这个地区只有一个入口&#xff0c;我们称之为 root 。 除了 root 之外&#xff0c;每栋房子有且只有一个“父“房子与之相连。一番侦察之后&#xff0c;聪明的小偷意识到“这个地方的所有房屋的排列类似于一棵二叉树…

Sip双按键对讲终端 医护对讲终端

Sip双按键对讲终端 医护对讲终端 1、前言 SIP对讲终端SIP-6002D双按键是一款采用了ARMDSP架构&#xff1b;配置了麦克风输入和扬声器输出&#xff0c;SIP-6002D带两路寻呼按键&#xff0c;可实现SIP对讲功能&#xff0c;作为SIP对讲的终端&#xff0c;主要用于银行调度对讲、部…

华为---STP协议简介(一)

生成树协议简介 什么是生成树协议 STP&#xff08;Spanning Tree Protocol&#xff09;是一种由交换机运行的、用来解决交换网络中环路问题的数据链路层协议。为提高网络可靠性&#xff0c;交换网络中通常会使用冗余链路&#xff0c;但是冗余链路会给交换网络带来环路风险&…

Coupang真的好做吗?韩国Coupang入驻流程——站斧浏览器

coupang真的好做吗&#xff1f; Coupang自开放全球注册以来&#xff0c;一直备受跨境电商各平台卖家的关注&#xff0c;那么作为一颗跨境电商的新星&#xff0c;真的值得做吗&#xff1f; 不到一年的关注度遭到如此众多的跨境卖家追捧的平台&#xff0c;火是有他的原因的&…

【C++】C++STL详解(四)—— vector的模拟实现

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;C学习 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 【C】CSTL详解&#xff08;三&am…

pdf文件可以压缩大小吗?pdf压缩方法分享

在日常生活和工作中&#xff0c;我们经常需要处理大量的PDF文件。有时候&#xff0c;一个PDF文件的大小可能超过了几十MB&#xff0c;甚至无法通过电子邮件发送。那么&#xff0c;如何有效地压缩PDF文件大小呢&#xff1f;本文将为你介绍三个简单易行的方法&#xff0c;帮助你轻…

​2:DDD概念大白话

产品代码都给你看了&#xff0c;可别再说不会DDD&#xff08;二&#xff09;&#xff1a;DDD概念大白话 # 这是一个讲解DDD落地的文章系列&#xff0c;作者是《实现领域驱动设计》的译者滕云。本文章系列以一个真实的并已成功上线的软件项目——码如云&#xff08;https://www…

uni-app打包iOS ipa文件后不上架App store为用户提供下载解决过程记录

写在前面&#xff0c;itms-services协议是什么 itms-services协议是苹果提供的一种让iOS应用在用户设备上无线安装或升级的协议。 具体来说: itms-services表示iOS应用无线安装服务的URL方案,格式为:itms-services://?actiondownload-manifest&urlMANIFEST_URL其中MANIF…

28 WEB漏洞-XSS跨站之WAF绕过及安全修复

目录 常规WAF绕过思路标签语法替换特殊符号干扰提交方式更改垃圾数据溢出加密解密算法结合其他漏洞绕过 自动化工具说明强大的fuzzing引擎安全修复方案演示案例&#xff1a; 常规WAF绕过思路 标签语法替换 xss的效果可以由多个代码来实现&#xff0c;就类似于我们使用到的其它…

02Redis的命令行客户端和桌面客户端的下载和安装

Redis桌面客户端 安装完成Redis服务,我们就可以在Redis的客户端操作Redis的数据库实现数据的CRUD了,客户端分为三类命令行客户端, 图形化桌面客户端,编程客户端 命令行客户端 Redis安装完成后就自带了命令行客户端: redis-cli [options] [commonds] -h选项&#xff1a;指定…

爬虫抓取数据超时是什么原因?如何解决爬虫抓取数据超时问题?

网络爬虫是一种自动化程序&#xff0c;它可以在互联网上抓取数据并将其存储在本地数据库中。然而&#xff0c;有时候&#xff0c;网络爬虫会遇到超时错误&#xff0c;导致无法成功抓取数据。那么&#xff0c;网络爬虫抓取数据显示超时是什么原因呢&#xff1f; 网络连接问题 网…