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.关键代码：

页面代码：

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

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

后台代码：

 /// <param name="e"></param>
        protected void lbUploadPhoto_Click(object sender, EventArgs e)
        {
            fileUpload(Request["__EVENTARGUMENT"]);
        }
        //从控件上传文件
        public void fileUpload(string number)
        {
            FileUpload fu = FindControl("fuPhoto"+number) as FileUpload;
            if (fu.PostedFile != null && fu.PostedFile.ContentLength > 0)
            {
                //1. 验证文件格式
                string ext = System.IO.Path.GetExtension(fu.PostedFile.FileName).ToLower();
                if (ext != ".jpg" && ext != ".gif" && ext != ".png")
                {
                    Response.Write("文件非法！");
                    return;
                }
                string savePath = Server.MapPath("~/upload/");//指定上传文件在服务器上的保存路径
                //2. 检查服务器上是否存在这个物理路径，如果不存在则创建
                if (!System.IO.Directory.Exists(savePath))
                {
                    System.IO.Directory.CreateDirectory(savePath);
                }
                Random random = new Random(DateTime.Now.Millisecond);
                string fileName = DateTime.Now.ToString("yyMMddhhmmss") + random.Next(10000) + ext;
                string path = savePath + fileName;
                fu.PostedFile.SaveAs(path);
                Image img=FindControl("img"+number) as Image;
                img.Src = "upload/" + fileName;
            }
            else
            {
                //没有图片的情况处理
            }
        }