码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-09-18 11:03:33      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   color   io   os   java   ar   strong   

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

bubuko.com,布布扣

 

1.实现原理:
 
FileUpload控件默认不支持服务端的ONCHANGE事件,此时用一种变通的方法借用客户端的onchange事件,调用__doPostBack方法来用LinkButton的OnClick事件模拟一个事件触发的过程,可以在LinkButton的OnClick事件中进行图片的上传,和预览加载。
 
2.关键代码:
 
   页面代码:
1 <asp:FileUpload ID="fuPhoto" onchange="javascript:__doPostBack(‘lbtnUpload‘,‘‘)"  runat="server" ToolTip="选择图片" ForeColor="White" Width="68"/>
2 <asp:LinkButton ID="lbtnUpload" runat="server" OnClick="lbUploadPhoto_Click"></asp:LinkButton>
3 <img id="img" runat="server" src="" />

   后台代码:

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

 

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

标签:style   blog   http   color   io   os   java   ar   strong   

原文地址:http://www.cnblogs.com/xyyt/p/3978562.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!