首页 > 代码库 > Asp.net实现同页面内多图片自动上传并带预览显示
Asp.net实现同页面内多图片自动上传并带预览显示
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=http://www.mamicode.com/"" /><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 = http://www.mamicode.com/"upload/" + fileName;31 }32 else33 {34 //没有图片的情况处理35 }36 }
Asp.net实现同页面内多图片自动上传并带预览显示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。