方法一
使用uploadify控件,引用:http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html
可以一次选择多个,使用uploadHander.ashx处理后台。可以自动上传,也可以手动
前台代码:要引用一些js
<link href="../JS/jquery.uploadify-v2.1.0/example/css/default.css" rel="stylesheet" type="text/css" /> <link href="../JS/jquery.uploadify-v2.1.0/uploadify.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="../JS/jquery.uploadify-v2.1.0/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="../JS/jquery.uploadify-v2.1.0/swfobject.js"></script> <script type="text/javascript" src="../JS/jquery.uploadify-v2.1.0/jquery.uploadify.v2.1.0.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#uploadify").uploadify({ 'uploader': '../JS/jquery.uploadify-v2.1.0/uploadify.swf', 'script': '../UploadHandlerStore.ashx', 'scriptData': { billNum: $("#hdBillNum").val() }, 'cancelImg': '../JS/jquery.uploadify-v2.1.0/cancel.png', 'folder': '../UploadFiles/store/', 'queueID': 'fileQueue', 'auto': false, 'multi': true, //多选 'width': '100', 'height': '27', 'buttonImg': '../JS/jquery.uploadify-v2.1.0/fj.gif', 'queueSizeLimit': 15, //允许上传的最大个数 'simUploadLimit': 15//同时上传的个数 }); }); //【上传】 function btnUploadOnClientClick() { $('#uploadify').uploadifyUpload(); } </script>
前台html
<table class="TableBorder" id="tabAttachment"> <tr> <td align="right"> 附件: </td> <td> <input type="file" name="uploadify" id="uploadify" /> </td> </tr> <tr> <td align="right"> </td> <td align="left"> <div id="fileQueue"> </div> <br /> </td> </tr> <tr> <td align="right"> </td> <td align="left"> <asp:Button ID="btnUpload" runat="server" CssClass="btntNoColor" OnClick="btnUpload_Click" OnClientClick="btnUploadOnClientClick()" Text="上传附件"/> </td> </tr> <tr> <td class="tdstyle1"> </td> <td> <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:GridView ID="GVattachment" runat="server" SkinID="GridViewDefault" DataKeyNames="id" AutoGenerateColumns="false" Width="80%"> <Columns> <asp:TemplateField HeaderText="附件名称"> <ItemTemplate> <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="false" CommandArgument='<%# Eval("saveAddress") %>' OnClick="LinkButton1_Click" Text='<%# Eval("FileTitle") %>'></asp:LinkButton> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="删除"> <ItemTemplate> <asp:ImageButton ID="ImageButton1" runat="server" CommandArgument='<%# Eval("saveAddress") %>' ImageUrl="~/images/delete.gif" OnClick="ImageButton1_Click" OnClientClick="javascript:return confirm('您确认删除吗')" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="btnUpload" /> </Triggers> </asp:UpdatePanel> </td> </tr> </table>
上传按钮也可以用input,我这里是为了刷新后台下面的GridView。把按钮放设置为异步,可以上传文件同时刷新附件列表。
后台:
<%@ WebHandler Language="C#" Class="UploadHandlerStore" %> using System; using System.Web; using MDGL.DBUtility; using System.Data; using System.IO; public class UploadHandlerStore : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Charset = "utf-8"; HttpPostedFile file = context.Request.Files["Filedata"]; string uploadPath = HttpContext.Current.Server.MapPath(@context.Request["folder"]);//UploadFilespropertyManage string billNum = context.Request["billNum"]; MDGL.DAL.propertyManage.lesseeApply Dal = new MDGL.DAL.propertyManage.lesseeApply(); if (billNum == null) { return; } string sql; string newFileName; string fileType; string saveAddress; if (file != null) { if (!Directory.Exists(uploadPath)) { Directory.CreateDirectory(uploadPath); } //文件重命名然后上传,插入 fileType = file.FileName.Substring(file.FileName.IndexOf("."));//.docx PageClass pg = new PageClass(); newFileName = pg.GetFileName() + fileType;// 年月日分秒毫秒+8位随机数 file.SaveAs(uploadPath + newFileName); saveAddress = context.Request["folder"] + newFileName;//地址+文件新名称 //插入数据库 sql = @"Insert into storeApprovalAttachment(billNum,fileType,fileTitle,saveAddress) values('" + billNum + "','" + fileType + "','" + file.FileName + "','" + saveAddress + "')"; SQLServerHelper.ExecuteNonQuery(CommandType.Text, sql); context.Response.Write("1"); //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失 } else { context.Response.Write("0"); } } public bool IsReusable { get { return false; } } }
//备注。上传成功后若队列扔显示,点击【添加附件】没反应,所以context.Response.Write("1"); //下面这句代码缺少的话,上传成功后上传队列的显示不会自动消失最好注释掉。