js添加文件框，不刷掉原来已选的文件
来源：自学PHP网
时间：2014-09-19 14:47 作者：
阅读:次
[导读] js添加文件框，不刷掉原来已选的文件实例有需要的朋友可参考参考。...
|
实例1
| 代码如下 |
复制代码 |
|
<!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>文档上传</title>
</head>
<body>
<form name="myform" method="post" action="uploadfile.php" id="upfiles" enctype="multipart/form-data" >
文件上传<br />
<input type="file" name="file[]" size="50" /><br />
<div id="a"><div id="d"></div></div>
<input type="button" id="c" value="添加一个上传文件"/>
<input type="submit" name="submitfile" value="上传文件" />
</form>
</body>
<script language="javascript">
i = 1;
document.getElementById("c").onclick=function(){
document.getElementById("d").outerHTML= '<div id="div_'+i+'"><input name="file[]" type="file" size=50 /><input type="button" value="删除" onclick="del('+i+')"/></div>'+document.getElementById("d").outerHTML;
i = i + 1;
}
|
function del(o){
document.getElementById("a").removeChild(document.getElementById("div_"+o));
}
</script>
</html>
更高级的写法
| 代码如下 |
复制代码 |
|
<script type="text/javascript">
var count = 0;
function Add(){
count += 1;
var File1 = document.getElementById("file1");
var div = document.createElement("div");
var countTxt = document.createTextNode("文本框"+count);
var inputTxt = document.createElement("input");
inputTxt.type = "text";
inputTxt.name = "txt"+count;
var btn = document.createElement("input");
btn.type = "button";
btn.value = "取消";
btn.onclick = function(){
this.parentNode.parentNode.removeChild(this.parentNode);
alert(this.parentNode.nodeName);
var str = File1.innerHTML;
var re = /[^<]+/i;
var n = File1.getElementsByTagName("div");
for(var k=0;k<n.length;k++){
n[k].innerHTML = n[k].innerHTML.replace(re,"文本框"+(k+1));
n[k].getElementsByTagName("input").item(1).onclick = this.onclick;
}
count -= 1;
}
div.appendChild(countTxt);
div.appendChild(inputTxt);
div.appendChild(btn);
File1.appendChild(div);
}
</script>
<input type="button" name="button" value="增加" onclick="Add();" />
<div id="file1"></div>
|
|
