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

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

一.测试效果

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. 表单脚本api_contenteditable

    <html> <head></head> <body> <form> <div contenteditable>ssadas&l ...

  2. Java基础-常量池

    在class文件中,“常量池”是最复杂也最值得关注的内容. Java是一种动态连接的语言,常量池的作用非常重要,常量池中除了包含代码中所定义的各种基本类型(如int.long等等)和对象型(如Stri ...

  3. Java基础-final和static的区别

    很多时候会容易把static和final关键字混淆,static作用于成员变量用来表示只保存一份副本,而final的作用是用来保证变量不可变.看下面这个例子: public class Test { ...

  4. java基础-关键字-native

     一. 什么是Native Method    简单地讲,一个Native Method就是一个java调用非java代码的接口.一个Native Method是这样一个java的方法:该方法的实现由 ...

  5. hdu 1166 敌兵布阵--BIT

    BIT模版题,学完直接刷毫无压力,水的不要不要的 敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...

  6. 使用Jayrock开源组件创建参数可为空的接口

    经过上一篇文章对Jayrock开源组件的分析,我发现了一个问题,就是在写接口的时候,可以设置某个参数为空,可以不需要进行参数的传递,具体写法如下: 图上的test参数就是可空类型,只需标识为int?类 ...

  7. DEDECMS数据库执行原理、CMS代码层SQL注入防御思路

    我们在上一篇文章中学习了DEDECMS的模板标签.模板解析原理,以及通过对模板核心类的Hook Patch来对模板的解析流量的攻击模式检测,达到修复模板类代码执行漏洞的目的 http://www.cn ...

  8. HDU 2242 考研路茫茫----空调教室

    传送门 考研路茫茫——空调教室 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  9. 【js】JSON.stringify 语法实例讲解

    语法:  JSON.stringify(value [, replacer] [, space]) value:是必选字段.就是你输入的对象,比如数组,类等. replacer:这个是可选的.它又分为 ...

  10. 使用PPA在Ubuntu上安装php5.4~5.6，7

    使用PPA在Ubuntu上安装php5.4~5.6,7 sudo apt-get install software-properties-common sudo add-apt-repository ...