js 获取、清空input type="file"的值示例代码

最新推荐文章于 2023-12-12 15:24:02 发布

转载最新推荐文章于 2023-12-12 15:24:02 发布 · 568 阅读

文章标签：

#JavaScript #html

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种常见的前端问题——上传文件控件无法通过常规方式重置，提供了两种有效的方法来解决这一问题，并附带了具体的JavaScript代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题环境：今天修改一个上传头像的bug，上传头像，然后点重置（reset），再上传同一个头像，页面没反应（update方法没有调用）；

html大概是这样的：<input type="file" onchange="upload(this)">

最后发现是file 标签的值没有重置，怎么重置呢？如下：

上传控件基础知识说明：

上传控件（<input type="file"/>）用于在客户端浏览并上传文件，用户选取的路径可以由value属性获取，但value属性是只读的，不能通过javascript来赋值，这就使得不能通过value=""语句来清空它。很容易理解为什么只读，如果可以随意赋值的话，那么用户只要打开你的网页，你就可以随心所欲的上传他电脑上的文件了。

js 获取<intput type=file />的值

代码如下:

<html> 
 <script language='javascript'>   
  function   show(){   
  var   p=document.getElementById("file1").value;  
  document.getElementById("s").innerHTML="<input id=pic type=image height=96 width=128 /> ";   
  document.getElementById("pic").src=p; 
  alert(p);    
  }   
  </script>
 <head>
  <title>MyHtml.html</title>
 </head>
 <body>
  <input type="file" name="file1" id="file1" onpropertychange="show();" />
  <span id="s"></span>
 </body>
</html>

清空上传控件（<input type="file"/>）的值的两种方法

方法1：

代码如下:

<span   id=span1>   
  <input   name=ab   type=file>   
  </span>   
  <input   name=button1   type=button   value="按"   onclick=show()> 
  <script   language=javascript>   
  function   show()   
  {   
  document.getElementById("span1").innerHTML="<input   name=ab   type=file>";   
  }   
  </script>

方法2：

代码如下:

function clearFileInput(file){ 
    var form=document.createElement('form'); 
    document.body.appendChild(form); 
    //记住file在旧表单中的的位置 
    var pos=file.nextSibling; 
    form.appendChild(file); 
    form.reset(); 
    pos.parentNode.insertBefore(file,pos); 
    document.body.removeChild(form); 
}

我用的方法一，可以；原文请戳这里