js jquery分別實現動態的文件上傳操作按鈕的添加和刪除

2019-11-20 21:15:44

字體：大中小

來源：轉載

供稿：網友

javascript實現

 
<!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文件上傳</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); 
} 
//節點的移動 
//$(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實現

復制代碼代碼如下:

 
<!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文件上傳</title> 
<title>jquery1</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); 
}**/ 
//jquery實現文件上傳的按鈕添加和刪除 
$(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> 