动态添加上传按钮，上传多个文件

最新推荐文章于 2022-12-20 16:55:57 发布

原创最新推荐文章于 2022-12-20 16:55:57 发布 · 1.8k 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#button #javascript #class #function #div #input

本文介绍了一种在网页上实现多个文件批量上传的技术方案。通过JavaScript动态生成HTML元素，包括文件输入框和删除按钮，使得用户可以方便地选择并移除待上传的文件。此外，还展示了如何在服务器端获取这些文件。

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

<script language="javascript" type="text/javascript">
function fAddAttach(){
   var gAttchHTML='<div class="qrle text2">附件：</div><div class="le"><input  type="file" runat="server" name="attachfile[]"  class="bot3" ></div><div class="le"><input type="button" name="Submit" value=" 删除 " class="bot2" id="btnDeleteReadAttach"  /></div><span></span>';
   var Attach=document.getElementById("dvReadAttach");
   var spnList=Attach.getElementsByTagName("SPAN");
   var spn=document.createElement("DIV");
   spn.className="qrc4";
   spn.innerHTML=gAttchHTML;
   spn.childNodes[1].childNodes[0].name="attachfile[]" + spnList.length;
   Attach.appendChild(spn);          //增加gAttchHTML
   fGetObjInputById(spn,"btnDeleteReadAttach").(){fDeleteAttach(this);};
   document.getElementById("aAddAttach").innerHTML="继续添加附件";
   Attach.style.display="";
   if(spnList.length>1){
     spn.childNodes[0].innerHTML="   ";
   }
}
function fGetObjInputById(obj,id){
   var inputList=obj.getElementsByTagName("INPUT");
   for(var i=0;i<inputList.length;i++){
     if(inputList[i].id==id){
    return inputList[i];
  }
   }
   return null;
}
function fDeleteAttach(obj){
   try{
   obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
   var Attach=document.getElementById("dvReadAttach");
   var spnList=Attach.getElementsByTagName("SPAN");
   if(spnList.length==0){
     document.getElementById("aAddAttach").innerHTML="添加附件";
     Attach.style.display="none";
   }else{
     document.getElementById("aAddAttach").innerHTML="继续添加附件";
   }
   }catch(exp){
  //fDebug("fDeleteAttach",exp.description);
   }
}

</script>

  <a href="javascript:fAddAttach();" id="aAddAttach">添加附件</a><div id="dvReadAttach" style="display:none">
       </div> <asp:Button ID="Button1" runat="server"  Text="Button" />

        HttpFileCollection files = HttpContext.Current.Request.Files;

        for (int i = 0; i < HttpContext.Current.Request.Files.Count; i++)
        {
            HttpPostedFile hp = (HttpPostedFile)HttpContext.Current.Request.Files[i];
               }

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。