js如何清空input file的值
更新时间：2023年01月21日 08:22:19 作者：lihefei_coder
这篇文章主要介绍了js如何清空input file的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
js清空input file的值
在做选择本地图片上传的功能时遇到一个问题，第一次点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纯js清空input File
function cleanFile(id){
var _file = document.getElementById(id);
if(_file.files)
_file.value = "";
else{
if (typeof _file != "object") return null;
var _span = document.createElement("span");
_span.id = "__tt__";
_file.parentNode.insertBefore(_span,_file);
var tf = document.createElement("form");
tf.appendChild(_file);
document.getElementsByTagName("body")[0].appendChild(tf);
tf.reset();
span.parentNode.insertBefore(_file,_span);
_span.parentNode.removeChild(_span);
_span = null;
tf.parentNode.removeChild(tf);
}
}总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章给大家介绍了关于javascript常用关键字的相关内容，文中介绍的非常详细，并且通过一个实例代码给大家介绍了关于Javascript关键字的重要性，需要的朋友们下面随着小编来一起学习学习学习吧2007-12-12
浏览器视频帧操作方法 requestVideoFrameCallback()
这篇文章主要介绍了浏览器视频帧操作方法 requestVideoFrameCallback()，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-07-07
这篇文章主要介绍了js创建对象的方法，js一个有三种方法创建对象，这里为大家做一个总结，感兴趣的小伙伴们可以参考一下2016-01-01
window.location.href是前端开发中一个非常重要且常用的属性,它为我们提供了获取和操作页面URL的便捷手段,本文主要介绍了js中window.location.href的用法大全,感兴趣的可以2023-12-12
这篇文章主要介绍了通过微信公众平台获取公众号文章的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
本篇文章主要介绍了JS传参及动态修改页面布局的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧2017-04-04
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
下面小编就为大家带来一篇原生JS实现风箱式demo,并封装了一个运动框架(实例代码)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-07-07
这篇文章主要为大家详细介绍了微信小程序云开发之使用云函数，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
这篇文章主要为大家详细介绍了QQ面板拖拽效果，探秘慕课网DOM事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要介绍了JS控制输入框内字符串长度,需要的朋友可以参考下2014-05-05
最新评论