IE and FireFox使用JavaScript清空上传控件input type="file"

最新推荐文章于 2025-08-22 11:32:18 发布

转载最新推荐文章于 2025-08-22 11:32:18 发布 · 1.6k 阅读

文章标签：

#file #input #javascript #firefox #ie #function

WEB 开发同时被 2 个专栏收录

140 篇文章

订阅专栏

脚本语言

104 篇文章

订阅专栏

本文介绍了一种使用JavaScript清空HTML中文件输入控件值的方法，避免了整个表单的重置，提供了具体实现代码。

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

From: http://genghaixu.javaeye.com/blog/198242

上传控件<input type="file">的值不能通过JavaScript来修改。有时候我们在上传控件中插入了值，就只能通过form的reset功能来清空了，这样就有些麻烦：form里面其他的值也被reset了。
既然可以使用form的reset清空，那就有办法了：新建一个临时form，然后将需要清空的上传控件移入其中，reset之后，再移回原来所在位置，最后删除创建的临时form。于是有了下面的代码：

 
 var Upload = { 
clear: function(id){ 
  var up = (typeof id=="string")?document.getElementById(id):id; 
  if (typeof up != "object") return null; 
  var tt = document.createElement("span"); 
  tt.id = "__tt__"; 
  up.parentNode.insertBefore(tt,up); 
  var tf = document.createElement("form"); 
  tf.appendChild(up); 
  document.getElementsByTagName("body")[0].appendChild(tf); 
  tf.reset(); 
  tt.parentNode.insertBefore(up,tt); 
  tt.parentNode.removeChild(tt); 
  tt = null; 
  tf.parentNode.removeChild(tf); 
}, 
clearForm: function(){ 
  var inputs,frm; 
  if (arguments.length == 0) 
  { 
   inputs = document.getElementsByTagName("input"); 
  }else{ 
   frm = (typeof arguments[0] == "string")?document.getElementById(arguments[0]):arguments[0]; 
   if (typeof frm != "object") return null; 
   inputs = frm.getElementsByTagName("input"); 
  } 
  
  var fs=[]; 
  for ( var i=0; i<inputs.length; i++ ) 
  { 
   if (inputs[i].type == "file") fs[fs.length] = inputs[i]; 
  } 
  var tf = document.createElement("form"); 
  for ( var i=0; i<fs.length; i++ ) 
  { 
   var tt = document.createElement("span"); 
   tt.id = "__tt__" + i; 
   fs[i].parentNode.insertBefore(tt, fs[i]); 
   tf.appendChild(fs[i]); 
  } 
  document.getElementsByTagName("body")[0].appendChild(tf); 
  tf.reset(); 
  for ( var i=0; i<fs.length; i++) 
  { 
   var tt = document.getElementById("__tt__" + i); 
   tt.parentNode.insertBefore(fs[i],tt); 
   tt.parentNode.removeChild(tt); 
  } 
  tf.parentNode.removeChild(tf); 
} 
} 

【全文】

上传控件<input type="file">的值不能通过JavaScript来修改。有时候我们在上传控件中插入了值，就只能通过form的reset功能来清空了，这样就有些麻烦：form里面其他的值也被reset了。
既然可以使用form的reset清空，那就有办法了：新建一个临时form，然后将需要清空的上传控件移入其中，reset之后，再移回原来所在位置，最后删除创建的临时form。于是有了下面的代码：

 
 var Upload = { 
clear: function(id){ 
  var up = (typeof id=="string")?document.getElementById(id):id; 
  if (typeof up != "object") return null; 
  var tt = document.createElement("span"); 
  tt.id = "__tt__"; 
  up.parentNode.insertBefore(tt,up); 
  var tf = document.createElement("form"); 
  tf.appendChild(up); 
  document.getElementsByTagName("body")[0].appendChild(tf); 
  tf.reset(); 
  tt.parentNode.insertBefore(up,tt); 
  tt.parentNode.removeChild(tt); 
  tt = null; 
  tf.parentNode.removeChild(tf); 
}, 
clearForm: function(){ 
  var inputs,frm; 
  if (arguments.length == 0) 
  { 
   inputs = document.getElementsByTagName("input"); 
  }else{ 
   frm = (typeof arguments[0] == "string")?document.getElementById(arguments[0]):arguments[0]; 
   if (typeof frm != "object") return null; 
   inputs = frm.getElementsByTagName("input"); 
  } 
  
  var fs=[]; 
  for ( var i=0; i<inputs.length; i++ ) 
  { 
   if (inputs[i].type == "file") fs[fs.length] = inputs[i]; 
  } 
  var tf = document.createElement("form"); 
  for ( var i=0; i<fs.length; i++ ) 
  { 
   var tt = document.createElement("span"); 
   tt.id = "__tt__" + i; 
   fs[i].parentNode.insertBefore(tt, fs[i]); 
   tf.appendChild(fs[i]); 
  } 
  document.getElementsByTagName("body")[0].appendChild(tf); 
  tf.reset(); 
  for ( var i=0; i<fs.length; i++) 
  { 
   var tt = document.getElementById("__tt__" + i); 
   tt.parentNode.insertBefore(fs[i],tt); 
   tt.parentNode.removeChild(tt); 
  } 
  tf.parentNode.removeChild(tf); 
} 
} 

下面是测试代码：

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="author" content="" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<title>Upload.clear</title> 
<style type="text/css"> 
</style> 
<script type="text/javascript"> 
var Upload = { 
clear: function(id){ 
  var up = (typeof id=="string")?document.getElementById(id):id; 
  if (typeof up != "object") return null; 
  var tt = document.createElement("span"); 
  tt.id = "__tt__"; 
  up.parentNode.insertBefore(tt,up); 
  var tf = document.createElement("form"); 
  tf.appendChild(up); 
  document.getElementsByTagName("body")[0].appendChild(tf); 
  tf.reset(); 
  tt.parentNode.insertBefore(up,tt); 
  tt.parentNode.removeChild(tt); 
  tt = null; 
  tf.parentNode.removeChild(tf); 
}, 
clearForm: function(){ 
  var inputs,frm; 
  if (arguments.length == 0) 
  { 
   inputs = document.getElementsByTagName("input"); 
  }else{ 
   frm = (typeof arguments[0] == "string")?document.getElementById(arguments[0]):arguments[0]; 
   if (typeof frm != "object") return null; 
   inputs = frm.getElementsByTagName("input"); 
  } 
  
  var fs=[]; 
  for ( var i=0; i<inputs.length; i++ ) 
  { 
   if (inputs[i].type == "file") fs[fs.length] = inputs[i]; 
  } 
  var tf = document.createElement("form"); 
  for ( var i=0; i<fs.length; i++ ) 
  { 
   var tt = document.createElement("span"); 
   tt.id = "__tt__" + i; 
   fs[i].parentNode.insertBefore(tt, fs[i]); 
   tf.appendChild(fs[i]); 
  } 
  document.getElementsByTagName("body")[0].appendChild(tf); 
  tf.reset(); 
  for ( var i=0; i<fs.length; i++) 
  { 
   var tt = document.getElementById("__tt__" + i); 
   tt.parentNode.insertBefore(fs[i],tt); 
   tt.parentNode.removeChild(tt); 
  } 
  tf.parentNode.removeChild(tf); 
} 
} 
</script> 
</head> 
<body> 
<form name="f" id="f" method="post"> 
<input type="file" name="f1" id="f1" /> 
<input type="button" value="clear" onclick="Upload.clear('f1')" /><br /> 
<input type="file" name="f2" id="f2" /><br /> 
<input type="file" name="f3" id="f3" /><br /> 
<input type="file" name="f4" id="f4" /><br /> 
<input type="file" name="f5" id="f5" /><br /> 
<input type="file" name="f6" id="f6" /><br /> 
<input type="file" name="f7" id="f7" /><br /> 
<input type="file" name="f8" id="f8" /><br /> 
<input type="button" value="clearAll" onclick="Upload.clearForm()" /><br /> 
<input type="submit" value="submit" /><input type="reset" value="reset" /> 
</form> 
<form name="form" id="form" method="post"> 
<input type="file" name="f9" id="f9" /><br /> 
<input type="file" name="f10" id="f10" /><br /> 
<input type="button" value="clearThisForm" onclick="Upload.clearForm('form')" /> 
</form> 
</body> 
</html>