Js jquery respectively achieve dynamic file upload operation button to add and delete

2020-03-30 01:18:48
OfStack

Javascript implementation

 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery File upload </title> 
<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
var addMore = function() { 
var div = document.getElementById("div2"); 
var br = document.createElement("br"); 
var input = document.createElement("input"); 
var button = document.createElement("input"); 

input.setAttribute("type", "file"); 
button.setAttribute("type", "button"); 
button.setAttribute("value", "Remove"); 

button.onclick = function() { 
div.removeChild(br); 
div.removeChild(input); 
div.removeChild(button); 
} 

div.appendChild(br); 
div.appendChild(input); 
div.appendChild(button); 
} 
//Node movement
//$(function(){ 

//}); 
</script> 
</head> 

<body> 
<div id="div1"> 
<input type="file" id="upload"/> 
<input type="button" id="btn" value="more" onclick="addMore();"/> 
</div> 
<div id="div2"></div> 
</body> 

</html>

Jquery implementation

 
<!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> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>jquery File upload </title> 
<title>jquery1</title> 
<script type="text/javascript" src="jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
 
//Jquery implements file upload buttons to add and remove
$(function(){ 
$("input[type=button]").click(function(){ 
var br = $("<br>"); 
var input = $("<input type='file'/>"); 
var button = $("<input type='button' value='Remove'/>"); 
$("#div1").append(br).append(input).append(button); 

button.click(function() { 
br.remove(); 
input.remove(); 
button.remove(); 
}); 
}); 
}); 
</script> 
</head> 

<body> 
<div id="div1"> 
<input type="file" id="upload"/> 
<input type="button" id="btn" value="more" onclick="addMore();"/> 
</div> 
<div id="div2"></div> 
</body> 
</html>