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 ...

随机推荐

bean标签
 bean的uri的路径 bean标签是属于struts中的标签,使用要在 Struts 1.3 Libraries中 struts-taglib-1.3.8.jar 中META-INFtld ...
通过url链接登录其他系统
目的:A系统通过链接跳转到其它系统(如B系统)并登录技术方案 1.A系统用户登录B系统方案 1.A系统用户账号已经和B系统账号绑定,直接模拟登录 2.A系统用户账号未和B系统账号绑定 ...
github 建立博客
Last login: Wed Jan 27 20:33:21 on console liukun-MBP:~ kamil$ cd ~/.ssh/ liukun-MBP:.ssh kamil$ ls ...
__name__和__main的含义
if __name__ == "__main__": main() This module represents the (otherwise anonymous) scope i ...
codevs1500 后缀排序
题目描述 Description 天凯是MIT的新生.Prof. HandsomeG给了他一个长度为n的由小写字母构成的字符串,要求他把该字符串的n个后缀(suffix)从小到大排序. 何谓后缀?假设 ...
hdu1695 莫比乌斯反演
莫比乌斯反演:可参考论文:<POI XIV Stage.1 <Queries>解题报告By Kwc-Oliver> 求莫比乌斯函数mu[i]:(kuangbin模板) http ...
我对Padding Oracle Attack的分析和思考
道哥的<白帽子讲web安全>有一章提到Padding Oracle Attack的攻击方式,据说这货在2011年的Pwnie Rewards上还被评为"最具价值的服务器漏洞&qu ...
MyEclipse------缓冲流的使用
可以把BufferedReader和BufferedWriter称为上层流,把它们指向的字符流(Reader,Writer)称为底层流. Java采用缓存技术将上层流和底层流连接. 底层字符输入流先将 ...
PHP实现发红包程序（helloweba网站经典小案例）
我们先来分析下规律. 设定总金额为10元,有N个人随机领取: N=1 第一个则红包金额=X元: N=2 第二个为保证第二个红包可以正常发出,第一个红包金额=0.01至9.99之间的某个随机数. 第 ...
spring 注解简单使用
一.通用注解 1.项目结构: 2.新建Person类,注解@Component未指明id,则后期使用spring获取实例对象时使用默认id="person"方式获取或使用类方式获取 ...

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

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

随机推荐

热门专题