模拟126邮箱实现一次上传多个附件的例子

最近,有好些网友问到类似的问题,我于是就做了个简单的例子，相信大家一看就明白。

有一点说明的是：对于file控件，必须点击他本身才可能完成对文件的上传，通过脚本打开选择文件对话框以后是无法再上传文件的，这也许是基于安全的考虑，即必须用户本人主观去上传本机的文件，否则本机文件有可能被脚本恶决上传。

 我这里只充许上传jpg和gif图片，当然你可以根据需要自己修改。

请看示例：

 

<%@ Page Language="C#" AutoEventWireup="true" Codebehind="UpFile.aspx.cs" Inherits="csdn.UI.UpFile" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>文件列表</title> <mce:style><!-- .attach { height:10px; border-left:solid 1px white; border-right:solid 1px gray; border-top:solid 1px white; border-bottom:solid 1px gray; background-color:#eeeef1; padding:0px; } .divFileInfo { width:400px; border:dotted 1px orange; height:150px; } .spText { position:relative; bottom:3px; padding-left:5px; padding-right:5px; } .myhelp { padding-left:0px; } .myhelp li { list-style:none; line-height:22px; padding-left:0px; } .divupload { font-size:12px; width:400px; background-color:White; border:solid 1px #336699; padding:10px; margin:auto; margin-top:100px; } td { font-family:@Tahoma; } .aclose { color:blue; } .aclose:hover { color:red; } body { margin:0; font-size:12px; } HTML,BODY,FORM { height:100%; } .inputfile { cursor:pointer !important; height:18px; left:-13px; filter:alpha(opacity=0); top:1px; width:1px; } .fileparent { background-image:url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/cpp2017/EntryImages/20090806/addimg.jpg); background-repeat:no-repeat; display:block; float:left; height:20px; margin-top:-1px; position:relative; text-decoration:none; top:0pt; width:80px; } --></mce:style><style mce_bogus="1"> .attach { height:10px; border-left:solid 1px white; border-right:solid 1px gray; border-top:solid 1px white; border-bottom:solid 1px gray; background-color:#eeeef1; padding:0px; } .divFileInfo { width:400px; border:dotted 1px orange; height:150px; } .spText { position:relative; bottom:3px; padding-left:5px; padding-right:5px; } .myhelp { padding-left:0px; } .myhelp li { list-style:none; line-height:22px; padding-left:0px; } .divupload { font-size:12px; width:400px; background-color:White; border:solid 1px #336699; padding:10px; margin:auto; margin-top:100px; } td { font-family:@Tahoma; } .aclose { color:blue; } .aclose:hover { color:red; } body { margin:0; font-size:12px; } HTML,BODY,FORM { height:100%; } .inputfile { cursor:pointer !important; height:18px; left:-13px; filter:alpha(opacity=0); top:1px; width:1px; } .fileparent { background-image:url(https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/cpp2017/EntryImages/20090806/addimg.jpg); background-repeat:no-repeat; display:block; float:left; height:20px; margin-top:-1px; position:relative; text-decoration:none; top:0pt; width:80px; } </style> <base target="_self" /> </head> <body> <form id="Form1" method="post" runat="server"> <input type="hidden" id="hidIds" runat="server"> <div id="divupload" class="divupload"> <div> <ul class="myhelp"> <li>说明：</li> <li>1、点击“添加图片”可以添加多个图片文件。</li> <li>3、点击“上传“可以将添加的图片批量上传到我的图片库。 </li> </ul> </div> <a id="divFileParent" class="fileparent" hidefocus="true" href="javascript:void(1==1);" mce_href="javascript:void(1==1);"> <input type="file" id="file1" size="1" class="inputfile" runat="server" onchange="javascript:SetValue(this)" /> </a> <br /> <div id="divFileInfo" class="divFileInfo"> </div> <div id="divFileList"> </div> <br /> <div style="text-align: center" mce_style="text-align: center"> <asp:Button ID="Button1" runat="server" CssClass="btn80" Text="上传" OnClientClick="javascript:return DoConfirmUp();" OnClick="btnUpLoad"></asp:Button> <input type="button" value="取消" class="btn" onclick="javascript:HideUpLoad();" /> </div> </div> </form> <mce:script language="javascript"><!-- String.prototype.Trim=function() { return this.replace(/(^/s*)|(/s*$)/g,""); } var gFileCount = 1; var gFileNameIndex = 1;//命名用的。只增不减，少免重复。 var aryFileName = new Object(); function SetValue(file) { if(file.value.Trim() == "") return; var div = document.createElement("span"); var ary = file.value.split("//"); var filename = ary[ary.length-1]; var extAry = filename.split('.'); if(extAry[extAry.length-1].toLowerCase() != "jpg" && extAry[extAry.length-1].toLowerCase() != "jpeg" ) { alert("只能是jpeg文件!"); return; } if (aryFileName[filename] == 1) { alert("该文件已经在附件中！"); file.parentNode.removeChild(file);//要不然有可能不能触发onchange CreateFile(); return; } aryFileName[filename] = 1; $("divFileList").appendChild(file); div.innerHTML = "<img src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/cpp2017/EntryImages/20090806/jpg.gif" mce_src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/cpp2017/EntryImages/20090806/jpg.gif" ><span class='spText'>"+filename+"</span><img src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/cpp2017/EntryImages/20090806/tabclosesel.jpg" mce_src="https://p-blog.youkuaiyun.com/images/p_blog_youkuaiyun.com/cpp2017/EntryImages/20090806/tabclosesel.jpg" fileid='"+file.id +"' title='删除附件' filename='"+filename+"' style="cursor:pointer" mce_style="cursor:pointer" onclick='javascripot:GoDeleteFile(this)'>"; div.className = "attach"; file.style.display = "none"; $("divFileInfo").appendChild(div); CreateFile(); } function $(id){return document.getElementById(id)} function DoConfirmUp() { if(gFileCount ==1) { alert("请选择附件！"); return false; } return confirm("确定要上传所选中的附件吗？"); } function GoDeleteFile(img) { var fileid = img.getAttribute("fileid"); var file = $(fileid); if(file !=null) { $("divFileList").removeChild(file); } img.parentNode.parentNode.removeChild(img.parentNode); var filename = img.getAttribute("filename"); aryFileName[filename] = null; gFileCount -- ; } function CreateFile() { gFileCount++; gFileNameIndex ++; //合 var file = document.createElement("INPUT"); file.type = "file"; file.id = "file"+gFileNameIndex; file.name = file.id; file.className = "inputfile"; $("divFileParent").appendChild(file); file.onchange = function() { SetValue(file); } } function CheckValue(context,result) { var v = $("txtName").value; v = v.toLowerCase(); var reg = new RegExp("/.(jpg|bmp|gif|png)$"); reg.ignoreCase = true; if(reg.exec(v) == null) { result.IsValid = false; }else { result.IsValid = true; } } // --></mce:script>

  

后台只是为了验证文件是否上传，至于保存相当简单就不多写了。

  protected void btnUpLoad(object sender, EventArgs e) { for (int i = 0; i < Request.Files.Count; i++) { Response.Write(Request.Files[i].FileName+"<BR>"); //Request.Files[i].SaveAs(Path);如果要保存 } }