JS清空上传控件input(type="file")的值的代码

  google找到这样一个解决方法:

  在上传控件中插入了值,就只能通过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);

  }

  }

  view plaincopy to clipboardprint?

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

  }

  }

  

复制代码 代码如下:

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

  }

  }

  这个方法使用示例:

  Html代码

  

复制代码 代码如下:

  <!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>

  <title>test</title>

  <script type="text/javascript">

  <!--引入以上js代码--></script>

  </head>

  <body>

  <form name="testform" method="post">

  <input type="file" name="testfile" />

  <input type="button" value="clear" onclick="Upload.clear('testfile')" /><br />

  <input type="button" value="clearAll" onclick="Upload.clearForm()" /><br />

  <input type="submit" value="submit" /><input type="reset" value="reset" />

  </form>

  </body>

  </html>