效果:
前台:
<%@ 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> <link href="css/upload.css" rel="stylesheet" type="text/css" /> <script src="js/mootools.js" type="text/javascript"></script> <script src="js/Swiff.Uploader.js" type="text/javascript"></script> <script src="js/Fx.ProgressBar.js" type="text/javascript"></script> <script src="js/FancyUpload2.js" type="text/javascript"></script> <script src="js/UploadScript.js" type="text/javascript"></script> </head> <body> <form action="upload.aspx?id=<%=Guid.NewGuid().ToString() %>" method="post" enctype="multipart/form-data" id="form-demo"> <div class="clearfix" style=" 811px; margin: 5% auto; overflow: hidden; height: 207px; display: block;"> <fieldset id="demo-fallback" style="display: none;"> <legend>文件上传</legend> <label for="demo-photoupload"> <input type="file" name="Filedata" /> </label> </fieldset> <div id="demo-status" class="hide"> <p> <b id="demo-browse2" style="position: absolute; 80px; height: 26px;"></b><a href="javascript:;" id="demo-browse"> <img src="images/brow_file.png" /></a> | <a href="javascript:;" id="demo-clear"> <img src="images/file_del.png" /></a> | <a href="javascript:;" id="demo-upload"> <img src="images/upload_ico.png" /></a> </p> <div> <strong class="overall-title"></strong> <br /> <img src="images/progress-bar/bar.gif" class="progress overall-progress" /> </div> <div> <strong class="current-title"></strong> <br /> <img src="images/progress-bar/bar.gif" class="progress current-progress" /> </div> <div class="current-text"></div> </div> <ul id="demo-list"></ul> </div> </form> </body> </html> <script type="text/javascript"> //js脚本出错的时候,不要给出任何提示。IE中如果js脚本运行错误,右下角会出现小的叹号。 //加上这句,就不会出现任何提示了。 window.onerror = new Function("return true;"); </script>
后台:
//获取文件 HttpPostedFile httpFile = Request.Files["FileData"]; if (httpFile != null) { //获取文件名字 string fileName = httpFile.FileName; //保存文件的路径 string uploadPath = Server.MapPath("temp\") + fileName; //保存文件 httpFile.SaveAs(uploadPath); Response.Write("文件: " + uploadPath + " 上传成功!"); }
Web.config:(可以限制上传文件大小)
<system.web> <!--设置文件上传的大小,这里设的是500MB--> <httpRuntime executionTimeout="300" maxRequestLength="512000" useFullyQualifiedRedirectUrl="false"/> </system.web>
需要引用很多文件,都在文件中。