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

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

测试页面请访问这里

核心JS代码如下

 

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);
 }
}

 

XeonWell Studio