Asp.net实现同页面内多图片自动上传并带预览显示

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› ASP.NET›ASP.NET编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

FileUpload控件实现单按钮图片自动上传并带预览显示

1.实现原理：

此方法适合针对有后台生成的图片相关内容，例如购物网站商品展示页面中的封面图片，图片的数量由后台访问数据库，并加载到页面。这种情况下，将会有x个FileUpload控件调用__doPostBack方法来用LinkButton的OnClick事件模拟一个事件触发的过程，由于上传控件的数量不固定，不可能使用多个用LinkButton的OnClick事件模拟事件触发的过程。也就是说只能有多个FileUpload控件调用一个LinkButton的OnClick事件模拟事件触发的过程。
多个FileUpload控件调用一个LinkButton的OnClick事件模拟事件触发的过程，由于上传每个图片后都需要显示相应的图片预览，就需要区分出来是每一次都是哪个FileUpload控件进行的上传操作，要加载哪一个图片。 __doPostBack('lbtnUpload1','')后面''的地方可以传递参数，我们可以从此处着手，对每一个图片相关的上传控件，图片预览框进行统一标识。
如何获取参数：
这个两个值在后台可以通过下边方法得到：
Request["__EVENTTARGET"] ：获取得到引发页面PostBack的控件ID
Request["__EVENTARGUMENT"]：获取参数。

2.关键代码：

页面代码：

1 <asp:FileUpload ID="fuPhoto1" onchange="javascript:__doPostBack('lbUploadPhoto','1')"  runat="server" ToolTip="选择图片" ForeColor="White" Width="68"/><br />
2 <img id="img" runat="server" src="" /><br />
3 <asp:FileUpload ID="fuPhoto2" onchange="javascript:__doPostBack('lbUploadPhoto','2')"  runat="server" ToolTip="选择图片" ForeColor="White" Width="68"/><br />
4 <asp:LinkButton ID="lbUploadPhoto" runat="server" OnClick="lbUploadPhoto_Click"></asp:LinkButton>

注意： __doPostBack('lbUploadPhoto','2')，第一个参数为LinkButton的名称，即name值。

后台代码：

 1  /// <param name="e"></param>
 2         protected void lbUploadPhoto_Click(object sender, EventArgs e)
 3         {
 4             fileUpload(Request["__EVENTARGUMENT"]);
 5         }
 6         //从控件上传文件
 7         public void fileUpload(string number)
 8         {
 9             FileUpload fu = FindControl("fuPhoto"+number) as FileUpload;
10             if (fu.PostedFile != null && fu.PostedFile.ContentLength > 0)
11             {
12                 //1. 验证文件格式
13                 string ext = System.IO.Path.GetExtension(fu.PostedFile.FileName).ToLower();
14                 if (ext != ".jpg" && ext != ".gif" && ext != ".png")
15                 {
16                     Response.Write("文件非法！");
17                     return;
18                 }
19                 string savePath = Server.MapPath("~/upload/");//指定上传文件在服务器上的保存路径
20                 //2. 检查服务器上是否存在这个物理路径，如果不存在则创建
21                 if (!System.IO.Directory.Exists(savePath))
22                 {
23                     System.IO.Directory.CreateDirectory(savePath);
24                 }
25                 Random random = new Random(DateTime.Now.Millisecond);
26                 string fileName = DateTime.Now.ToString("yyMMddhhmmss") + random.Next(10000) + ext;
27                 string path = savePath + fileName;
28                 fu.PostedFile.SaveAs(path);
29                 Image img=FindControl("img"+number) as Image;
30                 img.Src = "upload/" + fileName;
31             }
32             else
33             {
34                 //没有图片的情况处理
35             }
36         }