JS清空File控件路径值的兼容方案

清空File控件路径值的兼容方案

关于如何使用脚本修改fileupload控件值的问题，

在VS2005开发环境中，上传文件时通常需要一个取消按钮来清空type=file类型的value，且页面上可能存在多个file控件。

这一操作较为复杂，因为出于安全考虑，file的值本身不允许直接通过脚本修改。

方法1：使用脚本将该file的input元素移动到一个form中，然后调用reset方法。如果有多个这样的input，还需要再将其移回原处。由于.NET开发者习惯一个页面只有一个form且所有控件都在其中，因此不推荐此方法。

对于.NET开发者而言，习惯了一个页面只有一个form，所有控件都在其中。

方法2：这种方法有些投机取巧，即在脚本中调用以下代码： var fileup = document.getElementById(fileid); fileup.outerHTML = fileup.outerHTML; 这利用了IE对脚本处理及展现机制的特性。

方法3：主要解决Firefox上的问题，即重新生成一个id相同的file控件。注意，name属性也必须赋值，否则服务器很难接收提交的数据。

在日常项目开发中，通常会有上传文件的功能。一般在前端会通过JS来判断上传文件是否属于指定的文件类型，如果不属于就将控件值清空（当然也可以不清空）。

有一种方法可以很简单地将文件上传组件的值清空，代码如下： var file=document.getElementById("form1:fileupload"); file.outerHTML=file.outerHTML

以上方法只能在IE中使用。为了兼容FireFox，我们可以使用以下方式清空fileupload控件的值： <span id='uploadSpan'> <input type="file"> </span> <script language="JavaScript"> var html=document.getElementById('uploadSpan').innerHTML; function resetFile(){ document.getElementById('uploadSpan').innerHTML=html; } </script> 这样即可实现各浏览器都支持的效果。