固定数量的多文件上传:
界面参考:
//单击执行多文件上传 protected void btnFileUpload_Click(object sender, EventArgs e) { //判断是否存在上传文件 /*bool flag = false; ; bool[] b = { FileUpload1.HasFile, FileUpload2.HasFile, FileUpload3.HasFile }; foreach (bool item in b) { if (item) { flag = true; } }*/ //判断是否存在上传文件 if (!FileUpload1.HasFile && !FileUpload2.HasFile && !FileUpload3.HasFile) { lblMessage.Text = "至少选择一个上传的文件!"; } else { /*提供对客户端上载文件的访问,并组织这些文件,它是一个文件的集合. Request.Files获取客户端上载文件的集合*/ HttpFileCollection filecoll = Request.Files; //循环上传文件的集合,并上传每一个文件 for (int i = 0; i < filecoll.Count; i++) { /*得到上传的单个文件, * 通过HttpPostedFile实例来处理单个上传文件的访问*/ HttpPostedFile myfile = filecoll[i]; //得到上传文件大小判断文件是否存在 if (myfile.ContentLength > 0) { if (myfile.ContentLength < 10485760) { try { //得到上传的文件名 myfile.SaveAs(Page.MapPath("~/Files/") + myfile.FileName.Substring(myfile.FileName.LastIndexOf(@"\") + 1)); //这里得到上传文件名的方式还可以是: /* myfile.SaveAs(Page.MapPath("~/Files/") + System.IO.Path.GetFileName(myfile.FileName));*/ lblMessage.Text = "文件上传成功!"; } catch (Exception) { lblMessage.Text = "上传文件发生错误!"; } } else { lblMessage.Text = "上传文件不能大于10MB"; } } } } }
动态的添加多文件上传:
1.服务器端实现(动态添加FileUpload控件)
2.客户端实现(javascript)
服务器端实现(动态添加FileUpload控件)示例:
界面参考:
/*设置添加FileUpLoad控件的个数, 保存FileUpload控件的个数也可以用Session实现*/ private int Count { get { return Convert.ToInt32(ViewState["count"]); } set { ViewState["count"] = value; } } protected void Page_Load(object sender, EventArgs e) { //设置添加FileUpLoad控件的个数初始值为:0; if (!IsPostBack) { ViewState["count"] = 0; } } //创建FileUpLoad控件 private void CreateOrDeleteFileUpload(int count) { FileUpload fileupload = null; //遍历创建FileUpload for (int i = 0; i < count; i++) { fileupload = new FileUpload(); //设置FileUpload的Id fileupload.ID = "fileupLoad" + i.ToString(); //将FileUpload添加到Panel控件中 Panel1.Controls.Add(fileupload); } } //点击添加上传控件 protected void btnAddUpload_Click(object sender, EventArgs e) { CreateOrDeleteFileUpload(++Count); } //点击添加更新控件 protected void btnDeleteFileUpload_Click(object sender, EventArgs e) { CreateOrDeleteFileUpload(--Count); } //点击上传 protected void btnUpload_Click(object sender, EventArgs e) { HttpFileCollection fileColl = Request.Files; for (int i = 0; i < fileColl.Count; i++) { HttpPostedFile gpf = fileColl[i]; if (gpf.ContentLength > 0) { try { gpf.SaveAs(Page.MapPath("~/Files/") + gpf.FileName.Substring(gpf.FileName.LastIndexOf(@"\") + 1)); lblMessage.Text = "上传文件成功!"; } catch (Exception) { lblMessage.Text = "文件上传发生错误!"; } } } }
客户端实现(javascript)示例:
推荐使用客户端方式,因为服务端方式每次点击删除按钮都会向服务器提交一次.
<body>
<!--HTML的文件上传控件上传需要修改enctype属性-->
<form id="form1" runat="server" enctype="multipart/form-data">
<div>
<div id="panel">
</div>
<input type="hidden" value="1" id="filecount" />
<input type="button" value="添加上传组件" οnclick="javascript:AddFileUpLoad();" />
<asp:Button ID="btnUpLoad" runat="server" οnclick="btnUpLoad_Click"
Text="文件上传" />
<asp:Label ID="lblMessage" runat="server"></asp:Label>
</div>
</form>
</body>
<script type="text/javascript"> //添加上传控件 function AddFileUpLoad(){ //得到上传文件控件的文件名. var name="file"+document.form1.filecount.value; //设置隐藏表单域的值加1,下次得到上传控件的名字就不会相同 document.form1.filecount.value=parseInt(document.form1.filecount.value)+1; /*在id为panel的div元素的标签结束之前添加上传控件和删除按钮 <button οnclick='javascirpt:removeFile(this);'>删除</button> 删除按钮把当前对象传给删除上传控件的函数 */ panel.insertAdjacentHTML("beforeEnd","<div><input type='file' name="+name +"><button οnclick='javascirpt:removeFile(this);'>删除</button></div>"); } //删除控件 function removeFile(obj){ //得到该对象的父节点元素然后删除该父节点 obj.parentElement.removeNode(true); } </script>
//单击上传文件 protected void btnUpLoad_Click(object sender, EventArgs e) { HttpFileCollection fileColl = Request.Files; for (int i = 0; i < fileColl.Count; i++) { HttpPostedFile gpf = fileColl[i]; if (gpf.ContentLength > 0) { try { gpf.SaveAs(Page.MapPath("~/Files/") + gpf.FileName.Substring(gpf.FileName.LastIndexOf(@"\") + 1)); lblMessage.Text = "上传文件成功!"; } catch (Exception) { lblMessage.Text = "文件上传发生错误!"; } } } }
JS实现带图片预览功能的FileUpload控件
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>
<!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 type="text/javascript">
var timeOut;
function previewImage(upload){
//判断选择的文件是否为空
if(!upload||!upload.value){
return;
}
//验证是否是以.jpg等后缀名结尾
var extend=/\.jpg$|\.jpeg$|\.gif$/i;
if(extend.test(upload.value)){
var img=document.getElementById("img");
if(img){
clearTimeout(timeOut);
img.src='file://localhost/'+upload.value;
img.style.display="block";
//设置5秒后图片隐藏
timeOut=setTimeout("hidden()",5000);
}else{
clearTimeout(timeOut);
var img=document.createElement("img");
img.setAttribute('src','file://localhost/'+upload.value);
img.setAttribute("width",'120');
img.setAttribute('height','90');
img.setAttribute('id','img');
document.getElementById('form1').appendChild(img);
timeOut=setTimeout("hidden()",5000);
}
}else{
alert("你似乎选择的不是图像文件");
}
}
//隐藏图片
function hidden(){
clearTimeout(timeOut);
var img=document.getElementById("img");
if(img){
img.style.display="none";
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:FileUpload ID="FileUpload1" runat="server" οnchange="javascript:previewImage(this);" />
<asp:Button ID="Button1" runat="server" Text="上传" />
</div>
</form>
</body>
</html>