清空input file中的值

清空input file中的值清空inputfile中的值对于inputtype为file元素:未选择文件之前,它是这个样子:当选择文件名为index.html的文件后,它变成了这个样子,input元素会显示文件名信息:  有时候在选择上传文件时,需要前端对选择的文件格式进行一个判断,当满足条件时,才在input元素中显示其文件名信息,当不满足时则保持原来样子即显示“未选择任何文件”。由于input…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

清空input file中的值

对于input type为file元素:

未选择文件之前,它是这个样子:
这里写图片描述

当选择文件名为index.html的文件后,它变成了这个样子,input元素会显示文件名信息:
这里写图片描述
  有时候在选择上传文件时,需要前端对选择的文件格式进行一个判断,当满足条件时,才在input元素中显示其文件名信息,当不满足时则保持原来样子即显示“未选择任何文件”。由于input type为file元素默认只要选择了文件都会显示其文件名信息,所以想实现上述效果就需要在判断时对不符合条件的进行一个input file值的清空。方法如下,亲测有效:

1、value设置为空

对于input type为file元素,不能为value属性设置除空以外的值,否则会报错,如下图:
这里写图片描述
但是可以利用设置value为空来清空input file中的值。inputEle为input type为file的元素DOM。

inputEle.value = ''; 

因此,对于不满条件的可以通过设置value为空,让input元素不显示其文件名信息。

参考文献

[1] js清空input file的值
[2] 将input file的选择的文件清空的两种解决方案

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/160938.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 目标检测综述_通用目标检测

    目标检测综述_通用目标检测前言图片分类任务我们已经熟悉了,就是算法对其中的对象进行分类。而今天我们要了解构建神经网络的另一个问题,即目标检测问题。这意味着,我们不仅要用算法判断图片中是不是一辆汽车,还要在图片中标记出它的位置,用边框或红色方框把汽车圈起来,这就是目标检测问题。其中“定位”的意思是判断汽车在图片中的具体位置。近几年来,目标检测算法取得了很大的突破。比较流行的算法可以分为两类,一类是基于Regio…

    2022年10月13日
  • 神奇的CSS3按钮特效

    点击这里查看效果以下是源代码:1234567CSS3神奇的按钮-柯乐义89678695696697请使用支持CSS3的浏览器查看本页。原文698699700701

    2021年12月20日
  • 直流电机、减速器、编码器与TB6612FNG知识整理

    之前把MPU6050的相关知识了解了一下,可以做到测量欧拉角,在平衡小车的开发中需要测量小车的倾角来调整小车姿态。接下来该学习小车的电机驱动部分了,这里整理一下直流电机、减速器、编码器以及TB6612FNG的知识,为下一步驱动电机打基础!文章目录一.直流电机1.定义2.原理二.TB6612FNG1.简介2.优点3.使用方法三.减速器1.作用2.分类四.编码器1.概述2.原理3.四倍频技术一…

  • docker下载安装教程_mac装sql server

    docker下载安装教程_mac装sql server前言Docker提供轻量的虚拟化,你能够从Docker获得一个额外抽象层,你能够在单台机器上运行多个Docker微容器,而每个微容器里都有一个微服务或独立应用,例如你可以将Tomcat运行在一个D

  • 素数_c语言素数判断程序

    素数_c语言素数判断程序素数

  • Qt的QFile

    Qt的QFile在这里可以说是Qt的帮助文档一样了!确定不进来看看QFile这个东西怎么用么!

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号