, but the value of the upload control cannot be modified through JavaScript."/> , but the value of the upload control cannot be modified through JavaScript.">

Home  >  Article  >  Web Front-end  >  JS code to clear the value of the upload control input(type="file")_javascript skills

JS code to clear the value of the upload control input(type="file")_javascript skills

PHP中文网
PHP中文网Original
2016-05-16 18:58:571145browse

A small function I made recently requires clearing the value of 3525558f8f338d4ea90ebf22e5cde2bc, but the value of the upload control 3525558f8f338d4ea90ebf22e5cde2bc cannot be modified through JavaScript.

Google found such a solution:
If a value is inserted into the upload control, it can only be cleared through the reset function of the form, but other values ​​in the form are also reset.
Since you can use the reset of the form to clear it, there is a way: create a temporary form, and then move the upload control that needs to be cleared into it. After reset, move it back to its original location, and finally delete the created temporary form. js code:

The code is as follows:

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); 
} 
}

The code is as follows:

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); 
} 
}


Example of using this method:
Html code

The code is as follows:

<!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>

The above is the content of the JS code to clear the value of the upload control input(type="file")_javascript technique, For more related content, please pay attention to the PHP Chinese website (www.php.cn)!


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn