用JS动态添加和删除控件（转）-优快云博客

本文介绍了一个使用HTML和JavaScript实现的多文件上传功能，其中包括如何动态添加文件输入字段及对应的元数据输入项，并提供了删除已添加项的功能。该实现允许用户为每个文件指定链接网址和文字说明。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > <HTML> <HEAD> <title>多文件上传</title> <mce:script language="JavaScript"></mce:script> <LINK href="css/bs.css" mce_href="css/bs.css" type="text/css" rel="stylesheet"> <LINK href="css/ManageMent.css" mce_href="css/ManageMent.css" type="text/css" rel="stylesheet"> </HEAD> <body> <form id="form1" method="post" encType="multipart/form-data" runat="server"> <input type="hidden" value="1" name="myi"> <table cellSpacing="0" cellPadding="0" width="500" align="center"> <tr align="left" width="500"> <td width="500"> <table id="table0" style="WIDTH: 367px; HEIGHT: 72px" cellSpacing="0" cellPadding="0" align="center" name="table0"> <tr> <td><INPUT type="text" class="input1" size="6" value="图片文件:" name="txt0"><INPUT style="WIDTH: 241px; HEIGHT: 22px" type="file" size="21" name="File0"></td> <td rowSpan="3"><input onclick="DelFile(0)" type="button" value="删除" name="btnDel0"></td> </tr> <tr> <td><INPUT type="text" class="input1" size="6" value="链接网址:" name="txtU0"><input style="WIDTH: 240px; HEIGHT: 22px" type="text" name="TxtUrl0" id="TxtUrl0" runat="server"></td> </tr> <tr> <td><INPUT type="text" class="input1" size="6" value="文字说明:" name="txtI0"><input style="WIDTH: 240px; HEIGHT: 22px" type="text" name="TxtInfo0" id="TxtInfo0" runat="server"></td> </tr> </table> <br id="MyFile"> </td> </tr> <tr align="center"> <td><input onclick="addFile()" type="button" value="增加(Add)"> <asp:button id="BtnUpload" runat="server" Text="上传并生成"></asp:button></td> </tr> <tr> <td><asp:textbox id="Txt1" runat="server" Height="163px" TextMode="MultiLine" Width="469px"></asp:textbox></td> </tr> </table> </form> </body> </HTML>