js清空input file的值

js清空input file的值今天在做选择本地图片上传的功能时遇到一个问题,第一次选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,这个过程没有问题,问题出在当把创建的img元素节点删除后,再点file控件选中同一个文件后发现图片并没有被重新创建出来。分析了原因,是因为上一次file里选择的文件路径值与本次选择的文件路径值是一样的,值没有改变所以导致file不会触发onchange事件。解

大家好,又见面了,我是你们的朋友全栈君。

在做选择本地图片上传的功能时遇到一个问题,第一次点file按钮选择图片完成会触发onchange事件,获取文件后动态在界面上创建img标签展示,但把创建的img元素节点删除后,再点file按钮选择同一个文件后发现图片并没有被重新创建出来。

分析了原因:因为上一次选择的文件与本次选择的是同一个文件,两次的路径值相同,值没有改变所以导致file不会触发onchange事件,因此需要每次创建完img后重置file的value或者重置file的dom来解决这个问题。

方案一

每次创建完img后把file的value值重置为空字符串(设其它值会报错)

提示:浏览器的安全机制不允许直接用js修改file的value为空字符串以外的值,强制修改会报以下错误:
VM4061:1 Uncaught DOMException: Failed to set the ‘value’ property on ‘HTMLInputElement’: This input element accepts a filename, which may only be programmatically set to the empty string.

var file = document.getElementById('file');
file.value = ''; //file的value值只能设置为空字符串

方案二

每次创建完img后把file的outerHTML重置

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

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

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

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

(0)


相关推荐

  • iframe自适应高度_html页面自适应

    iframe自适应高度_html页面自适应为什么需要使用iframe自适应高度呢?其实就是为了美观,要不然iframe和窗口长短大小不一,看起来总是不那么舒服,特别是对于我们这些编程的来说,如鲠在喉的感觉。在页面中通过iframe嵌入了另外一个页面后,如何使得页面的这块区域随着iframe的高度自动适应而不会出现蹩脚的上下左右滚动条呢?下面这个办法就是使用javascript实现iframe高度自适应的,这个可是兼容所有浏览器的,ie,f…

    2022年10月12日
  • 上传文件块client实现

    上传文件块client实现

  • maven本地仓库配置了不起作用_maven指定远程仓库地址

    maven本地仓库配置了不起作用_maven指定远程仓库地址来配置一下maven本地仓库:第一步:下载到官网下载maven包。下载地址:http://maven.apache.org/download.cgi第二步:找个盘符创建个文件夹将将下载的maven报放进去,然后将下载的包解压了。第三步:配置MAVEN_HOME的环境变量。如下:注意这个地方的变量值的路劲是你自己的实际maven解压后的路径。配置完上面的了,将MAVEN_HO…

  • oracle删除索引_创建普通索引sql

    oracle删除索引_创建普通索引sql1.索引分类a)唯一索引,作用是数据约束,保证数据唯一,还有就是数据索引,提高查询效率b)一般索引,只有数据索引的作用,2.唯一索引的建立createuniqueindex索引名on表名(字段名)ok,假设有一个Emploeyy表,里面有一个empName字段,我们来为empName添加唯一索引createuniqueindexidx_empnameone…

  • Redis面试题(2020最新版)

    Redis面试题(2020最新版)

  • linux MySQL启动命令

    linux MySQL启动命令linux7:1、servicemysqlstartstopstatus2、/etc/init.d/mysqlstartstop…

发表回复

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

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