动态创建和删除文件输入框

最新推荐文章于 2021-06-10 14:52:25 发布

iteye_20823

最新推荐文章于 2021-06-10 14:52:25 发布

阅读量124

点赞数

文章标签： JavaScript HTML ViewUI

摸索了2个星期的玩意。


<script language="javascript">
 var num =2;
 var reg = /\d+/;
 function buildFileInput(){
  filediv = document.createElement("div");
  filediv.id = "div_"+num;
  var str = filediv.id;
  labeltext = document.createTextNode("附件"+num+":");
  fileinput = document.createElement("input");
  fileinput.type = "file";
  fileinput.name = "contractfile";
  fileinput.id = "contractfile";
  fileinput.size="25";
  btn = document.createElement("input");
  btn.type = "button";
  btn.value = "删除";
  btn.onclick= function(){remove(reg.exec(str));};

  filediv.appendChild(labeltext);
  filediv.appendChild(fileinput);
  filediv.appendChild(btn);

  document.all.filesinput.appendChild(filediv);
  num++;
 }
 //初始化文件输入框列表
 buildFileInput();
 function remove(o){
  document.getElementById("filesinput").removeChild(document.getElementById("div_"+o));
 }
  </script>

页面上原有的输入框


<input type="file" name="importContract" id="importContract" style="font-size:13px;" size="25" />
     <button onclick="buildFileInput()" style="font-size:13px;height:20px;">添 加</button>
     <div id="filesinput"></div>