多文件上传_onclick="delfile-优快云博客

本文链接：https://blog.youkuaiyun.com/server01/article/details/1607762

本文介绍了一个简单的多文件上传功能实现方法，包括前端界面的设计、使用JavaScript动态添加和删除文件输入框，以及后端处理上传文件的具体逻辑。

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

前台代码:

上传文件: 
<div id="TdFile"> 
    <div><INPUT id="OldFile" type="file"  runat="server"><br></div> 
</div> 
添加一个文件 
<input type="button" value="增加" onclick="AddFile();"> 
<input type="button" value="删除" class="button" onclick="DelFile();"> 
<asp:Button id="BtnUp" runat="server" Text="上传"></asp:Button>

JavaScript代码:

function AddFile() 
{ 
    var td = document.getElementById("TdFile"); 
    var obj = td.childNodes[0].cloneNode(true); 
    td.appendChild(obj); 
} 
function DelFile() 
{ 
    var td = document.getElementById("TdFile"); 
    var l = td.childNodes.length; 
    if(l == 1) 
    { 
        window.alert("这是最后一个上传对象，不能删除"); 
     } 
     else 
     { 
          td.removeChild(td.childNodes[l - 1]); 
     } 
}

后台代码:

private void BtnUp_Click(object sender, System.EventArgs e) 
{ 
    System.Web.HttpFileCollection fils = Request.Files; 
    int i = 0; 
    int l = fils.Count; 
    while(i < l) 
    { 
        this.SaveFile(fils[i++]); 
    }  
    this.Message.Text = "文件上传成功！"; 
} 

void SaveFile(System.Web.HttpPostedFile ipf) 
{ 
    if(ipf.FileName.Length > 1) 
    { 
        string fn = ipf.FileName.Substring(ipf.FileName.LastIndexOf("//") + 1); 
        string sfn = Server.MapPath(“images/upload/“) + fn; 
    if(File.Exists(sfn))//如果存在同名文件则删除 
    { 
         File.Delete(sfn); 
    } 
    ipf.SaveAs(sfn); 
} 