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

来源：互联网发布：老备案域名出售编辑：程序博客网时间：2024/06/01 21:19

问题环境：今天修改一个上传头像的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); }

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

0 0