JS实现多附件上传（asp.net）
前几天，用户提出一个需求-多附件上传,另外，每个上传文件要加一个别名,本人创新少，从网上收集了资料，稍微改写，满足了
客户的需求。在应用到程序之前，先做了个小测试，测试通过，小高兴，就记录下了这个小测试。
一.测试效果
1.主界面
2.点击添加附件
3.点开始上传
二.实现
本文的主程序是Main.aspx ，附件上传为Default.aspx,上传的文件放在images文件夹下面
2.程序代码
1.Main.aspx前台程序
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Main.aspx.cs" Inherits="Main" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script language="javascript" type="text/javascript"> function addFile(ret) { var fileNameAndRemark=ret.toString().split("|"); var fileName=fileNameAndRemark[1].toString().split("*"); var Remark=fileNameAndRemark[0].toString().split("*"); for(var i=0;i<fileName.length;i++) { var div = document.createElement("div"); var a = document.createElement("input"); a.setAttribute("type", "text"); a.setAttribute("size", "30"); a.setAttribute("name", "filename"); a.setAttribute("value", Remark[i]); a.setAttribute("readonly", "true"); div.appendChild(a); var b = document.createElement("label"); b.innerText = "---"; div.appendChild(b); var c = document.createElement("input"); c.setAttribute("type", "text"); c.setAttribute("size", "30"); c.setAttribute("name", "remark"); c.setAttribute("value", fileName[i]); c.setAttribute("readonly", "true"); div.appendChild(c); var d = document.createElement("input"); d.setAttribute("type", "button") d.setAttribute("onclick", "deteFile(this)"); d.setAttribute("value", "移除") div.appendChild(d); document.getElementById("container").appendChild(div); } } function deteFile(o) { while (o.tagName != "DIV") o = o.parentNode; o.parentNode.removeChild(o); } // <!CDATA[ function Button1_onclick() { var returnval = window.showModalDialog("Default.aspx", "", "dialogWidth=750px, dialogHeight=500px, , status=no,toolbar=no,menubar=no,scrollbars=yes,resizable=yes"); addFile(returnval); } // ]]> </script>. </head> <body> <form id="form1" runat="server"> <div> <input id="Button1" type="button" value="添加附件" onclick="return Button1_onclick()" /> </div> <div id="container"> </div> <div> <asp:Button ID="btnInStorage" runat="server" OnClientClick="validate()" onclick="btnInStorage_Click" Text="入库 " /> </div> </form> </body> </html>
2. Main的后台程序
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class Main : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnInStorage_Click(object sender, EventArgs e) { var FileNames=Request.Form["filename"]; var Remarks = Request.Form["remark"]; } }
3.Default的前台程序
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <base target="_self" /> <script language="javascript" type="text/javascript"> function addFile() { var div = document.createElement("div"); var g = document.createElement("label"); g.innerText = "备注:"; div.appendChild(g); var e = document.createElement("input"); e.setAttribute("type", "text"); e.setAttribute("size", "30"); e.setAttribute("name", "remark"); e.setAttribute("runat", "server"); div.appendChild(e); var f = document.createElement("input"); f.setAttribute("type", "file") f.setAttribute("name", "File") f.setAttribute("runat", "server"); f.setAttribute("size", "50") div.appendChild(f) var d = document.createElement("input"); d.setAttribute("type", "button") d.setAttribute("onclick", "deteFile(this)"); d.setAttribute("value", "移除") div.appendChild(d); document.getElementById("_container").appendChild(div); } function deteFile(o) { while (o.tagName != "DIV") o = o.parentNode; o.parentNode.removeChild(o); } function Save() { var filenames = document.getElementById("HFFileNames").value; var Remarks = document.getElementById("HFRemarks").value; window.returnValue = Remarks + "|" +filenames; window.close(); } </script> </head> <body> <form id="form1" runat="server" > <h3>多文件上传</h3> <div id="_container"> <label>备注:</label><input type="text" id="remark" runat="server" size="30" /> <input id="File1" type="file" size="50" name="File" runat="server"/> </div> <div> <input type="button" value="添加文件" onclick="addFile()" /> </div> <div style="padding:10px 0"> <asp:Button runat="server" Text="开始上传" ID="UploadButton" onclick="UploadButton_Click"></asp:Button> </div> <input type="hidden" runat="server" id="HFFileNames" /> <input type="hidden" runat="server" id="HFRemarks" /> </form> </body> </html>
4.Default的后台程序
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void UploadButton_Click(object sender, EventArgs e) { String[] Remarks= Request.Form["remark"].Split(','); HttpFileCollection files = HttpContext.Current.Request.Files; try { for (int iFile = 0; iFile < files.Count; iFile++) { ///'检查文件扩展名字 HttpPostedFile postedFile = files[iFile]; string fileName; fileName = System.IO.Path.GetFileName(postedFile.FileName); if (fileName != "") { HFFileNames.Value =HFFileNames.Value+fileName+"*"; HFRemarks.Value = HFRemarks.Value + Remarks[iFile] + "*"; postedFile.SaveAs(System.Web.HttpContext.Current.Request.MapPath("images/") + fileName); } } if (HFFileNames.Value.Length > 0) { HFFileNames.Value = HFFileNames.Value.Substring(0, HFFileNames.Value.Length - 1); } if (HFRemarks.Value.Length > 0) { HFRemarks.Value = HFRemarks.Value.Substring(0, HFRemarks.Value.Length - 1); } AssetTool.JavaScriptTool.AlertMsgAndExeAFunction(this, "上传成功!", "Save()"); } catch (System.Exception Ex) { AssetTool.JavaScriptTool.AlertMsg(this, Ex.Message); } } }
5.关于上传后附件的备注和附件名字问题
附件名字列表：var FileNames=Request.Form["filename"];
备注列表：var Remarks = Request.Form["remark"];
