JS实现多附件上传（asp.net）
前几天，用户提出一个需求-多附件上传,另外，每个上传文件要加一个别名,本人创新少，从网上收集了资料，稍微改写，满足了
客户的需求。在应用到程序之前，先做了个小测试，测试通过，小高兴，就记录下了这个小测试。
一.测试效果
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"];
备注：本文只是多附件上传的其中一种实现方法，只是关注功能的实现，并无特效，如需特效请自行添加
