日期:2014-05-16  浏览次数:20433 次

2008-08-29 08:11 使用JS清空上传控件input(type="file")的值

最近做的一个小功能,需要清空<input type="file">的值,但上传控件<input type="file">的值不能通过JavaScript来修改。

?

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

?

?? 在上传控件中插入了值,就只能通过form的reset功能来清空了,但是form里面其他的值也被reset了。

?? 既然可以使用form的reset清空,那就有办法了:新建一个临时form,然后将需要清空的上传控件移入其中,reset之后,再移回原来所在位置,最后删除创建的临时form。js代码:

??

Js代码

  1. var Upload = {???
  2. clear: function(id){???
  3. var up = (typeof id=="string")?document.getElementById(id):id;???
  4. if (typeof up != "object") return null;???
  5. var tt = document.createElement("span");???
  6. tt.id = "__tt__";???
  7. up.parentNode.insertBefore(tt,up);???
  8. var tf = document.createElement("form");???
  9. tf.appendChild(up);???
  10. document.getElementsByTagName("body")[0].appendChild(tf);???
  11. tf.reset();???
  12. tt.parentNode.insertBefore(up,tt);???
  13. tt.parentNode.removeChild(tt);???
  14. tt = null;???
  15. tf.parentNode.removeChild(tf);???
  16. },???
  17. ??
  18. clearForm: function(){???
  19. var inputs,frm;???
  20. if (arguments.length == 0)???
  21. {???
  22. inputs = document.getElementsByTagName("input");???
  23. }else{???
  24. frm = (typeof arguments[0] == "string")?document.getElementById(arguments[0]):arguments[0];???
  25. if (typeof frm != "object") return null;???
  26. inputs = frm.getElementsByTagName("input");???
  27. }???
  28. ??
  29. var fs=[];???
  30. for ( var i=0; i<inputs.length; i++ )???
  31. {???
  32. if (inputs[i].type == "file") fs[fs.length] = inputs[i];???
  33. }???
  34. ??
  35. var tf = document.createElement("form");???
  36. for ( var i=0; i<fs.length; i++ )???
  37. {???
  38. var tt = document.createElement("span");???
  39. tt.id = "__tt__" + i;???
  40. fs[i].parentNode.insertBefore(tt, fs[i]);???
  41. tf.appendChild(fs[i]);???
  42. }???
  43. document.getElementsByTagName("body")[0].appendChild(tf);???
  44. tf.reset();???
  45. for ( var i=0; i<fs.length; i++)???
  46. {???
  47. var tt = document.getElementById("__tt__" + i);???
  48. tt.parentNode.insertBefore(fs[i],tt);???
  49. tt.parentNode.removeChild(tt);???
  50. }???
  51. tf.parentNode.removeChild(tf);???
  52. }???
  53. }???

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代码

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR