• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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         }

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
蛙蛙推荐:用ASP.NET WEB Services和Flash MX 2004打造MP3播放器发布时间:2022-07-10
下一篇:
Asp.netMVC中的ViewData与ViewBag发布时间:2022-07-10
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap