清除文件上传控件Value-优快云博客

本文介绍了清除HTML文件上传控件(input type=file)值的多种方法，包括使用replace方法、重置表单、重新创建替换及采用视觉效果等，旨在解决无法直接清空value属性的问题。

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

进行文件上传时，若文件格式正确，那么就需要清空文件上传控件的value，让重新上传。那是无论是用JS还是用jquery都无法清空value的值，因为

http://pengfeng.iteye.com/blog/756863 写道

在 HTML 文档中，<input type="file"> 标签是浏览器向服务器发送选中文件的。该元素有一个 value 属性，保存了用户指定的文件的名称，为安全起见，file-upload 元素的value 属性是只读的，不允许程序员修改它的值，并且HTML value 属性也会被忽略

但是有时候又的确需要置空该控件的value值。在网上搜罗了下，加上我自己的测试，差不多有以下几个方法：

1、使用replace方法，将文件上传控件的value替换成空。具体代码如下：

file_input_obj.outerHTML=file_input_obj.outerHTML.replace(/(value=\").+\"/i,"$1\"");

这个代码我测试过了，可以置空，通过F12可以看到，控件的value值的确置空了，但是若用JS或者jQuery去取该控件的值，还是会获取到置空前的值。所以，该方法若是只满足视觉效果还是可以的，实际判断是否为空应该是不行的。

以下转载的文章说到了两个方法：

转载链接：http://www.myexception.cn/web/2025234.html

转载内容：

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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

而上传控件又没有一个clear()之类的函数，所以这使得无刷新上传文件显得稍稍不爽，尤其对于追求完美的开发者而言。然而今天在做一个Asp.net控件时却发现不得不需要清空一下上传控件，于是便开始想办法。网上搜索一番，不出所料，没有找到什么结果。关键时刻只能靠自己了。

仔细想想，上传控件是不是任何时候都不可能被清空呢？答案是否，form.reset()方法能够重置所有得表单元素。只要调用inputFile.form.reset()，那么上传控件的值就清空了，不要担心它被恢复为某个默认值，value是只读的，你不能为它设置某个初始值。

于是开始设想，如果我只需要reset一下上传控件，怎么解决？其他的表单元素要保持原状。一个可行的方法是，reset之前获取所有的表单域的值，之后再用这些值填充，虽然显得稍微复杂，但借助 prototype框架的Form对象提供的方法，还是很容易做到的。这样就能够得到需要的结果了。

然而这个方法还是不够优雅，沿着思路继续想下去，不难得到改进的方法：创建一个新的form，把上传控件临时放过来，再调用这个form的reset方法，完工之后再把上传控件弄回去。这个 form无需进入DOM结构便能正常工作，所以不用担心会对界面有任影响。下面给出函数实现，经过验证工作良好，呵呵。

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

方法二：比较简单了重新建立个 file 就可以了。

 <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、重置表单：

使用重置的方法，从理论上来讲是可以行的，但是打击面是不是太广，要是表单中的东西较少还行，要是太多就会有点麻烦。

3、重新新建，进行替换：

文件上传控件检测到选了文件之后，判断是否有效，要是无效，直接新建或克隆一个type='file'的input，然后直接替换。我已经测试过该方法可行，且一对一，不会影响到别的控件和功能。

4、采用视觉效果：

如前面写的实现单图片预览的一样，写三个input，一个text文本框，用来展示文件路径；一个button，用来表示“浏览”按钮，一个type=file的input，用来实现真正的上传。再使用CSS，将前面两个文本框覆盖掉第三个上传控件，这样子在视觉上看起来还是一个文件上传控件，代码如下：

<input type='text' name='textfield' id='textfield' class='systext' /> <!--文本框，用来显示上传的文件路径-->   
<input type='button' class='but uploadbtn' value='浏览...' /><!--浏览按钮-->  
<input type="file" name="applogo" class="file" size="28"/> <!--真正的浏览按钮，用来打开上传页面，前面的“浏览”按钮掩盖此按钮，为好看-->

在文件上传控件上添加onchange事件，选择完文件之后触发该事件。该事件直接从file的input中取值，赋值到第一个文本框中用来展示文件路径，以后的校验、判断是否为空都从第一个文本框取值，清空也只是清空第一个文本框的值。这样子就跟文件上传控件没有半毛钱关系了。不过有个缺点：太麻烦，东西多难维护。

综上，个人觉得最好的方法还是第三种：重新新建，进行替换。