asp.net之Repeater ItemTemplate 图片上传 + 立即显示

效果图如下：

aspx repeater页面代码：

<asp:Repeater ID="rptIntroPhotoes" runat="server" OnItemCommand="rptShowPhotoes_ItemCommand"
                                        OnItemDataBound="rptShowPhotoes_ItemDataBound">
                                        <ItemTemplate>
                                            <div class="c-img-i">
                                                <asp:Image runat="server" ID="Image1" Width="130" Height="130" ImageUrl="<%# Container.DataItem %>" οnclick="showPhotoClick(this);" />
                                                <asp:FileUpload runat="server" ID="FileUpload2" ToolTip="Intro" CssClass="fu" οnchange="showPhotoChange(this);" Style="display: none" />
                                                <asp:Button runat="server" ID="btnUploadShowPhoto1" Text="上传" CssClass="cssHide" CommandName="Upload" Style="display: none" />
                                                <asp:HiddenField ID="HiddenField1" runat="server" />
                                                <div class="storeImgDelBtn">
                                                    <asp:ImageButton runat="server" ID="showdel" CommandName="Del" ImageUrl="/Content/images/delete.png" />
                                                </div>
                                            </div>
                                        </ItemTemplate>
                                    </asp:Repeater>

代码解释：

Repeater 控件这里就不解释了，如果不清楚这个控件是怎么用的那就度娘，这里说一下Repeater的两个属性

OnItemCommand :Repeater控件中的子控件触发事件时触发

OnItemDataBound: Repeater控件绑定到数据源时触发(在本示例中可以不用该属性)

下面简单描述一下Repeater控件中的子控件的用途

asp:Image ： 在本示例中起到一个展示的作用，ImageUrl：是图片地址

<asp:Image runat="server" ID="Image1" Width="130" Height="130" ImageUrl="<%# Container.DataItem %>" οnclick="showPhotoClick(this);" /> 

asp:FileUpload：在本示例中起到选择文件的作用，为了页面好看，这个控件将隐藏Style="display: none"，onchange：onchange事件是当我们在选择好文件后触发的事件，在本示例中为了简单这个onchange事件没有做实现，如果为了较好的用户体验的话可以在onChange事件中写入“上传中，请稍后”等友好的提示。

<asp:FileUpload runat="server" ID="FileUpload2" ToolTip="Intro" CssClass="fu" οnchange="showPhotoChange(this);" Style="display: none" />

asp:Button：在本示例中起到上传文件的作用，为了页面好看，这个控件将隐藏Style="display: none"，

<asp:Button runat="server" ID="btnUploadShowPhoto1" Text="上传" CssClass="cssHide" CommandName="Upload" Style="display: none" />

asp:ImageButton ：在本示例中起到删除文件的作用，为了删除好看的话你可使用一些JS做一些动画，比如鼠标移入移除事件

<asp:ImageButton runat="server" ID="showdel" CommandName="Del" ImageUrl="/Content/images/delete.png" />

如果你仔细的话可以看出asp:Button 和 asp:ImageButton 都有一个CommandName , 这表示一个是上传“Upload” 另外一个则是表示删除"DEL" ，这个连个标识符会在后面用到。

aspx.cs 方法：

        protected void rptShowPhotoes_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            List<string> showPhotos = getPhotoes((Repeater)source);
            string command = e.CommandName;
            FileUpload fu = e.Item.FindControl("FileUpload2") as FileUpload;
            HiddenField hf = e.Item.FindControl("HiddenField1") as HiddenField;
            Image mImage = e.Item.FindControl("Image1") as Image;
            switch (command)
            {
                case "Upload":


                        string fullFileName = fu.PostedFile.FileName;//获取文件名称
                        string type = fullFileName.Substring(fullFileName.LastIndexOf(".") + 1);//图片格式
                        if (type != "jpg" || type != "JPG" || type != "gif" || type != "GIF" || type != "jpeg" || type != "JPEG" || type != "png" || type != "PNG")//判断是否为图片类型
                        {
                            Common.MessageBox.Show(this, "请选择图片文件类型");  // 这个 Common.MessageBox.Show是我们自己封装的页面提示方法，你们可以自己写
                            return;

                        }

//后面的代码就是将文件写入特定的文件夹和将文件名称保存到数据库中了，这里就不写了

                    
                    break;
                case "Del":

                    //删除代码不实现，这个需要根据需求写。

                    break;
            }

        }