Maison >interface Web >js tutoriel >JS清空上传控件input(type="file")的值的代码_javascript技巧
最近做的一个小功能,需要清空a2dc5349fb8bb852eaec4b6390c03b14的值,但上传控件a2dc5349fb8bb852eaec4b6390c03b14的值不能通过JavaScript来修改。
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>
以上就是JS清空上传控件input(type="file")的值的代码_javascript技巧的内容,更多相关内容请关注PHP中文网(www.php.cn)!