• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

JS实现多附件上传(asp.net)

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

     一.测试效果

            1.主界面

 

 

      2.点击添加附件

3.点开始上传

    二.实现

             1.测试程序轮廓图

  本文的主程序是Main.aspx ,附件上传为Default.aspx,上传的文件放在images文件夹下面

  2.程序代码

      1.Main.aspx前台程序

View Code
<%@ 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的后台程序

View Code
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的前台程序

View Code
<%@ 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的后台程序

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

                    5.关于上传后附件的备注和附件名字问题

                           附件名字列表:var FileNames=Request.Form["filename"];

                           备注列表:var Remarks = Request.Form["remark"];

         备注:本文只是多附件上传的其中一种实现方法,只是关注功能的实现,并无特效,如需特效请自行添加


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
IIS报错未将对象引用设置到对象的实例。IIS注册ASP.NET2.04.0发布时间:2022-07-10
下一篇:
Asp.net生成静态页面原理发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap