1 前台代码
<%@ Page Language="C#" AutoEventWireup="true"
CodeFile="upload.aspx.cs" Inherits="upload" %>
<!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
id="Head1" runat="server">
<title>批量上传</title>
<script src="jquery/jquery.js"
type="text/javascript"></script>
<script
type="text/javascript">
var count = 1; //上传组件个数
$(function () {
//添加上传组件
$("#btnAdd").click(function () {
// if
($("#DivUploads").find(":button").length >= 7) {
// alert('最多只能添加八个上传组件！');
// return;
//
}
var strHtml = '<span><input type="file"
name="fileUpload" runat="server" />';
strHtml +=
"<input type='button' onclick='delUploadBtn(" + count + ")'
value='删除'/></span>";
$("#DivUploads").append(strHtml);
count++;
});
});
//删除上传组件
function delUploadBtn(index)
{
$("#DivUploads").find(":button").each(function ()
{
var text = "" + $(this).attr("onclick");
if (text.indexOf("delUploadBtn(" + index + ")") != -1) {
$(this).parent().remove();
}
});
}
</script>
</head>
<body>
<form
id="form1" runat="server">
<asp:FileUpload ID="FileUpload1"
runat="server" />
<%--
<asp:LinkButton ID="btnAdd"
runat="server">添加</asp:LinkButton>--%>
<input
type="button" id="btnAdd" value="添加" />
<div id="DivUploads"
style="border: 0px solid; width: 300px; height: auto;">
</div>
<asp:Button ID="btnUpload" runat="server" Text="上传"
OnClick="btnUpload_Click" />
</form>
</body>
</html>
2 后台代码
using System;
using System.Collections.Generic;
using
System.Linq;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
public partial class upload : System.Web.UI.Page
{
protected void
Page_Load(object sender, EventArgs e)
{
}
/// <summary>
/// 上传处理
///
</summary>
/// <param name="sender"></param>
///
<param name="e"></param>
protected void
btnUpload_Click(object sender, EventArgs e)
{
string filepath
= Request.Form["fileUpload"];
//上传文件保存路径
string savePath =
Server.MapPath("UploadFiles") + "\\";
//提供对客户端上载文件的访问
HttpFileCollection uploadFiles =
System.Web.HttpContext.Current.Request.Files;
try
{
for (int i = 0; i < uploadFiles.Count; i++)
{
System.Web.HttpPostedFile postedFile =
uploadFiles[i];
string fileName =
postedFile.FileName;//完整的路径
fileName =
System.IO.Path.GetFileName(postedFile.FileName); //获取到名称
string fileExtension =
System.IO.Path.GetExtension(fileName);//文件的扩展名称
string type =
fileName.Substring(fileName.LastIndexOf(".") + 1); //类型
if (uploadFiles[i].ContentLength > 0)
uploadFiles[i].SaveAs(savePath + fileName);
}
}
catch (System.Exception Ex)
{
Response.Write(Ex);
}
}
}
还是整个运行的效果图：
为了用着方便以及代码重用，可以新建一个客户端控件，加到客户端里面去
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="uploadControl.ascx.cs" Inherits="Admin_userControl_uploadControl" %>
<style type="text/css">
#table_fileList{
clear:left;
border-top:1px solid #A2C1E0;
border-left:1px
solid #A2C1E0;
border-spacing:0px;
}
#table_fileList
td{
border-right:1px solid #A2C1E0;
border-bottom:1px
solid #A2C1E0;
}
#table_fileList th{
border-right:1px
solid #A2C1E0;
border-bottom:1px solid #A2C1E0;
}
</style>
<script type="text/javascript">
var
count = 2; //上传组件个数
$(function() {
//添加上传组件 New
method
$("#btnAddUploadNew").click(function()
{
var fileName = GetUploadFileName();
if
(fileName == "") {
alert('上传文件不能为空！');
return;
}
else {
var fileCount =
GetUploadFileCount();
if
(!checkFile(fileName))//检查文件是否重复上传
{
return;
}
var Html = "<tr><td>" + fileName +
"</td><td><img src='../Images/cross.png' alt='删除'
onclick='delUploadBtn(" + count +
")'/></td></tr>";
$("#uploadBody").append(Html);
var strHtml =
'<span><input type="file" name="fileUpload" runat="server"
/><input type="text" value="' + count + '" style="display:none"
/></span>';
$("#DivUploads").find(":file").each(function() {
$(this).css("display", "none");
});
$("#DivUploads").append(strHtml);
if (fileCount == 4)
{
$("#DivUploads
span:last-child").find(":file").attr("disabled",
"disabled");
}
count++;
}
});
});
//删除上传组件
function delUploadBtn(index)
{
//删除隐藏的上传控件
$("#DivUploads").find(":text").each(function() {
if
($(this).attr("value") == "" + (index - 1)) {
$(this).parent().remove();
return;
}
});
//New method删除下方显示的上传文件列表
$("#uploadBody tr td").find("img").each(function() {
var text
= ""+$(this).attr("onclick");
if (text.indexOf(index) != -1)
{
$(this).parent().parent().remove();
}
});
$("#DivUploads
span:last-child").find(":file").attr("disabled", ""); //上传控件恢复可用
}
//获取上传文件的数量
function GetUploadFileCount()
{
var count = 0;
$("#uploadBody
tr").each(function() {
count++;
});
return count;
}
//获取上传文件名
function GetUploadFileName() {
var fileName
= "";
$("#DivUploads").find(":file").each(function()
{
if ($(this).css("display") != "none")
{
fileName = $(this).val();
return;
}
});
return
fileName;
}
//检查上传文件是否重复,以及扩展名是否符合要求
function
checkFile(fileName) {
var flag = true;
$("#uploadBody tr td").each(function() {
if (fileName ==
$(this).text()) {
flag = false;
alert('上传文件中已经存在\'' + fileName + '\'!');
return;
}
});
//文件类型判断
var str =
"jpg|jpeg|bmp|gif|doc|docx|xls|xlsx|txt";
var fileExtName =
fileName.substring(fileName.lastIndexOf(".") + 1); //获取上传文件扩展名
if
(str.indexOf(fileExtName.toLowerCase()) == -1) {
alert("只允许上传格式为jpg，jpeg，bmp，doc，docx，xls，xlsx，txt的文件。");
flag
= false;
}
return flag;
}
</script>
<!--上传控件列表begin-->
<div
id="DivUploads" style="height:auto;float:left;width:250px;">
<span>
<input id="file_first" type="file" name="fileUpload"
runat="server"/>
<input type="text" value="1"
style="display:none" />
</span>
</div><input
id="btnAddUploadNew" type="button" value="添加" />
<!--上传控件列表end-->
<br/>
<!--上传文件列表begin-->
<table border="0" cellspacing="1" cellpadding="0" id="table_fileList"
>
<thead>
<tr>
<th
style="width: 464px;" align="left">
文件名</th>
<th >
删除</th>
</tr>
</thead>
<tbody
id="uploadBody">
</tbody>
</table>
<!--上传文件列表end-->
