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[].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）的更多相关文章

asp.net结合uploadify实现多附件上传
1.说明 uploadify是一款优秀jQuery插件,主要功能是批量上传文件.大多数同学对多附件上传感到棘手,现将asp.net结合uploadfiy如何实现批量上传附件给大家讲解一下,有什么不对的 ...
基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...
基于MVC4+EasyUI的Web开发框架形成之旅(4)--附件上传组件uploadify的使用
大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随笔<Web开发中的文件上传组件uploadify的使用>中可以看到,Asp.NET中 ...
（转）基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
http://www.cnblogs.com/wuhuacong/p/3343967.html 大概一年前,我还在用Asp.NET开发一些行业管理系统的时候,就曾经使用这个组件作为文件的上传操作,在随 ...
ueditor调用其中的附件上传功能
ueditor实际上是集成了webuploader, 在做内容发布的时候想既有ueditor又有单独的附件上传按钮,这时再加载一个webuploader就显得过于臃肿了,单独利用ueditor的上传功 ...
百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程之更改图片和附件上传路径
本文是接上一篇博客,如果有疑问请先阅读上一篇:百度在线编辑器UEditor(v1.3.6) .net环境下详细配置教程默认UEditor上传图片的路径是,编辑器包目录里面的net目录下下面就演示如 ...
使用plupload做一个类似qq邮箱附件上传的效果
公司项目中使用的框架是springmvc+hibernate+spring,目前需要做一个类似qq邮箱附件上传的功能,暂时只是上传小类型的附件处理过程和解决方案都需要添加附件,处理过程和解决方案都可 ...
Dynamic CRM 2013学习笔记（十三）附件上传 / 上传附件
上传附件可能是CRM里比较常用的一个需求了,本文将介绍如何在CRM里实现附件的上传.显示及下载.包括以下几个步骤: 附件上传的web页面附件显示及下载的附件实体调用上传web页面的JS文件实体上 ...
playframework中多附件上传注意事项
playframework中多附件上传注意事项 2013年09月24日 play 暂无评论 //play版本问题经确认,1.0.3.2版本下控制器中方法参数 List<File> fi ...

随机推荐

Excel如何查找名字重复的数据
来源于:http://jingyan.baidu.com/article/414eccf6091ff86b431f0aec.html Cokery今天在帮助同事整理数据的时候遇到了一个难题,就是在Ex ...
js获取select改变事件
js获取select改变事件onchage前的值和 onclick事件 <select id="wupin_id" name="wupin_id" on ...
【ZOJ 3897】Candy canes//Fiddlesticks
题题意给你一串数,a1...an,从左到右每次让一个数减小c,如果这个数小于c,那就减为0.第n个数减小后,又从第一个开始从左到右.如果这次某个数减小到0,那就改变方向,如果遇到已经是0的,就跳过 ...
洛谷U5653 宋荣子的小饼干
题目描述楼下机房的LYL有n个妹子,分别编号为a1,a2……an,每个妹子都拥有一定数量的小饼干.有一天,saruka没有吃晚饭,饿的不要不要的,这时,他忽然想起了LYL的妹子们有小饼干可以吃.于是 ...
[NOIP2011] 提高组洛谷P1314 聪明的质监员
题目描述小T 是一名质量监督员,最近负责检验一批矿产的质量.这批矿产共有 n 个矿石,从 1到n 逐一编号,每个矿石都有自己的重量 wi 以及价值vi .检验矿产的流程是: 1 .给定m 个区间[L ...
P1391 走廊泼水节
时间: 1000ms / 空间: 131072KiB / Java类名: Main 背景话说,中中带领的OIER们打算举行一次冬季泼水节,当然这是要秘密进行的,绝对不可以让中中知道.不过中中可是老 ...
Json序列化对象
之前都是用的二进制的序列化方法,是.net自带的,但是最常用到的还是Json序列化 (1)只需要调用 Newtonsoft.Json.dll 即可 public class JsonTools { / ...
jQuery操作滚动条
一.窗体滚动条 1.获取窗体滚动条当前纵向和横向位置 var currentY=$(document.body).scrollTop();//窗体滚动条纵向位置 var currentX=$(docu ...
高速公路（Highway，ACM/ICPC SEERC 2005,UVa1615)
I think: #include <stdio.h> #include <stdlib.h> #include <string.h> #include <m ...
关于JS判断图片是否加载完成且获取图片宽度的方法
做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处 ...

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

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

随机推荐

热门专题