首页 > web前端 > js教程 > JS清空上传控件input(type="file")的值的代码_javascript技巧

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

PHP中文网
发布: 2016-05-16 18:58:57
原创
1161 人浏览过

最近做的一个小功能,需要清空的值,但上传控件的值不能通过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(&#39;testfile&#39;)" /><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)!


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板