快捷導(dǎo)航

js jquery分別實現(xiàn)動態(tài)的文件上傳操作按鈕的添加和刪除

更新時間：2014年01月13日 15:31:12 作者：

本文為大家介紹下使用js及jquery實現(xiàn)動態(tài)的文件上傳操作按鈕的添加和刪除，具體示例如下，希望對大家有所幫助

javascript實現(xiàn)

 
<!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); 
} 
//節(jié)點的移動 
//$(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實現(xiàn)

復(fù)制代碼代碼如下:

 
<!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實現(xiàn)文件上傳的按鈕添加和刪除 
$(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> 