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

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

一.测试效果

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[].toString().split("*");

             var Remark=fileNameAndRemark[].toString().split("*");

             for(var i=;i<fileName.length;i++)

             {

                var div = document.createElement("div");

                var a = document.createElement("input");

                a.setAttribute("type", "text");

                a.setAttribute("size", "");

                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", "");

                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", "");

          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", "")

          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="" /> <input id="File1" type="file" size="" 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 = ; 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 > )

        {

            HFFileNames.Value = HFFileNames.Value.Substring(, HFFileNames.Value.Length - );

        }

        if (HFRemarks.Value.Length > )

        {

            HFRemarks.Value = HFRemarks.Value.Substring(, HFRemarks.Value.Length - );

        }

        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"];

JS实现多附件上传（asp.net）的更多相关文章

  1. asp.net结合uploadify实现多附件上传

    1.说明 uploadify是一款优秀jQuery插件,主要功能是批量上传文件.大多数同学对多附件上传感到棘手,现将asp.net结合uploadfiy如何实现批量上传附件给大家讲解一下,有什么不对的 ...

  2. 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

    大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...

  3. 基于MVC4+EasyUI的Web开发框架形成之旅(4)--附件上传组件uploadify的使用

    大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...

  4. （转）基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用

    http://www.cnblogs.com/wuhuacong/p/3343967.html 大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随 ...

  5. ueditor调用其中的附件上传功能

    ueditor实际上是集成了webuploader, 在做内容发布的时候想既有ueditor又有单独的附件上传按钮,这时再加载一个webuploader就显得过于臃肿了,单独利用ueditor的上传功 ...

  6. 百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径

    本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程 默认UEditor上传图片的路径是,编辑器包目录里面的net目录下 下面就演示如 ...

  7. 使用plupload做一个类似qq邮箱附件上传的效果

    公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件 处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...

  8. Dynamic CRM 2013学习笔记（十三）附件上传 / 上传附件

    上传附件可能是CRM里比较常用的一个需求了,本文将介绍如何在CRM里实现附件的上传.显示及下载.包括以下几个步骤: 附件上传的web页面 附件显示及下载的附件实体 调用上传web页面的JS文件 实体上 ...

  9. playframework中多附件上传注意事项

    playframework中多附件上传注意事项 2013年09月24日 play 暂无评论 //play版本问题 经确认,1.0.3.2版本下控制器中方法参数  List<File> fi ...

随机推荐

  1. struts2面试题汇总

    一.工作原理 一个请求在Struts2框架中的处理大概分为以下几个步骤 1 客户端初始化一个指向Servlet容器(例如Tomcat)的请求 2 这个请求经过一系列的过滤器(Filter)(这些过滤器 ...

  2. 39.Android版本小知识

    中文名----英文名----版本----对应API Level 棉花糖 Marshmallow - 6.0.1_r10 - API 23棉花糖 Marshmallow - 6.0.0_r5 - API ...

  3. Linux虚拟地址空间布局

    在多任务操作系统中,每个进程都运行在属于自己的内存沙盘中.这个沙盘就是虚拟地址空间(Virtual Address Space),在32位模式下它是一个4GB的内存地址块.在Linux系统中, 内核进 ...

  4. POJ1523 SPF

    Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 8254   Accepted: 3772 Description Consi ...

  5. linux中防CC攻击两种实现方法（转）

    CC攻击就是说攻击者利用服务器或代理服务器指向被攻击的主机,然后模仿DDOS,和伪装方法网站,这种CC主要是用来攻击页面的,导致系统性能用完而主机挂掉了,下面我们来看linux中防CC攻击方法. 什么 ...

  6. java + jquery + ajax + json 交互

    前端js部分: $.ajax({ async:true, cache:false, type:"POST", dataType : 'json', url:"/shopp ...

  7. AppStore占坑注意事项

    AppStore占坑注意事项 我们会提前在AppStore(iTunesConnect)里注册一些应用名称,以满足未来业务需要和防止恶意注册,其中有一些需要注意的事情,整理如下: 倒计时180天 为了 ...

  8. java中静态属性和和静态方法的继承问题 以及多态的实质

    首先结论是:java中静态属性和和静态方法可以被继承,但是没有被重写(overwrite)而是被隐藏. 静态方法和属性是属于类的,调用的时候直接通过类名.方法名完成的,不需继承机制就可以调用如果子类里 ...

  9. MyEclipse------快速读取特定目录下的文件的内容(字节输入流)

    other.jsp <%@ page language="java" import="java.util.*" pageEncoding="UT ...

  10. 改变了Tomcat路径后无法卸载和重装的解决办法

    错误如下: ---------------------------Apache Tomcat Setup---------------------------Failed to install Tom ...