最近做的一个小功能，需要清空<input type="file">的值，但上传控件<input type="file">的值不能通过JavaScript来修改。
google找到这样一个解决方法：
在上传控件中插入了值，就只能通过form的reset功能来清空了，但是form里面其他的值也被reset了。
既然可以使用form的reset清空，那就有办法了：新建一个临时form，然后将需要清空的上传控件移入其中，reset之后，再移回原来所在位置，最后删除创建的临时form。js代码：
Js代码varUpload={ clear:function(id){varup=(typeofid=="string")?document.getElementById(id):id;if(typeofup!="object")returnnull;vartt=document.createElement("span"); tt.id="__tt__"; up.parentNode.insertBefore(tt,up);vartf=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(){varinputs,frm;if(arguments.length==0) { inputs=document.getElementsByTagName("input"); }else{ frm=(typeofarguments[0]=="string")?document.getElementById(arguments[0]):arguments[0];if(typeoffrm!="object")returnnull; inputs=frm.getElementsByTagName("input"); }varfs=[];for(vari=0;i<inputs.length;i++) {if(inputs[i].type=="file")fs[fs.length]=inputs[i]; }vartf=document.createElement("form");for(vari=0;i<fs.length;i++) {vartt=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(vari=0;i<fs.length;i++) {vartt=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代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="/1999/xhtml"><head><title>test</title><scripttype="text/javascript"><!--引入以上js代码--></script></head><body><formname="testform"method="post"><inputtype="file"name="testfile"/><inputtype="button"value="clear"onclick="Upload.clear('testfile')"/><br/><inputtype="button"value="clearAll"onclick="Upload.clearForm()"/><br/><inputtype="submit"value="submit"/><inputtype="reset"value="reset"/></form></body></html>
