JS实现多附件上传（asp.net）

浏览数：38 / 时间：2015年06月09日

前几天，用户提出一个需求-多附件上传,另外，每个上传文件要加一个别名,本人创新少，从网上收集了资料，稍微改写，满足了

客户的需求。在应用到程序之前，先做了个小测试，测试通过，小高兴，就记录下了这个小测试。

一.测试效果

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);
      }
    }
}