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

來源：懂視網責編：小采時間：2020-11-27 20:40:30

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

JS清空上傳控件input(type="file")的值的代碼_javascript技巧:最近做的一個小功能，需要清空<input type="file">的值，但上傳控件<input type="file">的值不能通過JavaScript來修改。google找到這樣一個解決方法：在上傳控件中插入了值，就只能通過form的reset功能來清空了，

推薦度：

點擊下載本文 文檔為doc格式

導讀JS清空上傳控件input(type="file")的值的代碼_javascript技巧:最近做的一個小功能，需要清空<input type="file">的值，但上傳控件<input type="file">的值不能通過JavaScript來修改。google找到這樣一個解決方法：在上傳控件中插入了值，就只能通過form的reset功能來清空了，

最近做的一個小功能，需要清空<input type="file">的值，但上傳控件<input type="file">的值不能通過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>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com