JavaScript动态添加Input组件-优快云博客

本文链接：https://blog.youkuaiyun.com/iteye_7988/article/details/82063159

本文介绍了一个实用的JavaScript脚本，该脚本允许用户在网页表单中动态添加和删除文件输入框，非常适合需要多次上传文件的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >


在遇到需要添加附件或者上传文件时,附件的数量可能不定的,所以附件浏览框需要动态生成,我遇到了这个问题,但在网上没有找到好用的代码,于是自己写了一段,拿来共享:

<html>
</head>
<script language="javascript" type="text/ecmascript">
//======================
//功能:在表单中input file控件
//参数:parentID---要插入input file控件的父元素ID
//    inputID----input file控件的ID
//======================
function createInput(parentID,inputFileID){  
  var parent=$(parentID);//获取父元素

  var div=document.createElement("div");//创建一个div容器用于包含input file
  var x=parseInt(Math.random()*(80-1))+1;
  var divName=inputFileID+x.toString();//随机div容器的名称
  div.name=divName;
  div.id=divName;

  var  aElement=document.createElement("input"); //创建input
  aElement.name=inputFileID;
  aElement.id=inputFileID;
  aElement.type="file";//设置类型为file

  var delBtn=document.createElement("input");//再创建一个用于删除input file的Button
  delBtn.type="button";
  delBtn.value="删除";
  delBtn.onclick=function(){ removeInput(parentID,divName)};//为button设置onclick方法

  div.appendChild(aElement);//将input file加入div容器
  div.appendChild(delBtn);//将删除按钮加入div容器
  parent.appendChild(div);//将div容器加入父元素
}
//============================
//功能:删除一个包含input file的div 容器
//参数:parentID---input file控件的父元素ID
//    DelDivID----个包含input file的div 容器ID
//============================
function removeInput(parentID,DelDivID){
 var parent=$(parentID);
 parent.removeChild($(DelDivID));
}
//通过元素ID获取文档中的元素 
function $(v){return document.getElementById(v);}
</script>
<body>
<div align="left" id="div_Pic" style="border:1px solid #CCCCCC">
 <input name="PicFile" type="file" id="ShowPicFile">
</div>
<input type="button" onClick="createInput('div_Pic','PicFile')" name="button" id="button" value="+ 继续添加图片">
</body>
</html>