夏日博客

A-A+

js添加文件框，不刷掉原来已选的文件

2016年02月19日 前端设计 暂无评论 阅读 7 views 次

js添加文件框，不刷掉原来已选的文件实例有需要的朋友可参考参考.

实例1,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
  2. <html xmlns="http://www.w3.org/1999/xhtml">   
  3. <head>   
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
  5. <title>文档上传</title>   
  6. </head>   
  7. <body>  
  8. <form name="myform" method="post" action="uploadfile.php" id="upfiles" enctype="multipart/form-data" >   
  9. 文件上传<br />  
  10. <input type="file" name="file[]" size="50" /><br />  
  11. <div id="a"><div id="d"></div></div>  
  12. <input type="button" id="c" value="添加一个上传文件"/>  
  13. <input type="submit" name="submitfile" value="上传文件" />   
  14. </form>  
  15. </body>  
  16. <script language="javascript">  
  17. i = 1;  
  18. document.getElementById("c").onclick=function(){  
  19.   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;  
  20.   ii = i + 1;  
  21. }  
  22. function del(o){  
  23.  document.getElementById("a").removeChild(document.getElementById("div_"+o));  
  24. }  
  25. </script>  
  26. </html>  

更高级的写法,代码如下:

  1. <script type="text/javascript">  
  2. var count = 0;  
  3. function Add(){  
  4.    count += 1;  
  5.    var File1 = document.getElementById("file1");  
  6.    var div = document.createElement("div");  
  7.    var countTxt = document.createTextNode("文本框"+count);  
  8.    var inputTxt = document.createElement("input");  
  9.    inputTxt.type = "text";  
  10.    inputTxt.name = "txt"+count;  
  11.    var btn = document.createElement("input");  
  12.    btn.type = "button";  
  13.    btn.value = "取消";  
  14.    btn.onclick = function(){  
  15.        this.parentNode.parentNode.removeChild(this.parentNode);  
  16.     alert(this.parentNode.nodeName);  
  17.        var str = File1.innerHTML;  
  18.        var re = /[^<]+/i;  
  19.        var n = File1.getElementsByTagName("div");  
  20.        for(var k=0;k<n.length;k++){  
  21.            n[k].innerHTML = n[k].innerHTML.replace(re,"文本框"+(k+1));  
  22.            n[k].getElementsByTagName("input").item(1).onclick = this.onclick;  
  23.        }  
  24.        count -= 1;  
  25.    }  
  26.      
  27.    div.appendChild(countTxt);  
  28.    div.appendChild(inputTxt);  
  29.    div.appendChild(btn);  
  30.    File1.appendChild(div);  
  31. }  
  32. </script>  
  33. <input type="button" name="button" value="增加" onclick="Add();" />  
  34. <div id="file1"></div>  
标签：

给我留言