asp.net之Repeater ItemTemplate 图片上传 + 立即显示
来源:互联网 发布:国有企业分配制度 知乎 编辑:程序博客网 时间:2024/05/17 03:54
效果图如下:
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 %>" onclick="showPhotoClick(this);" />
<asp:FileUpload runat="server" ID="FileUpload2" ToolTip="Intro" CssClass="fu" onchange="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 %>" onclick="showPhotoClick(this);" />
asp:FileUpload:在本示例中起到选择文件的作用,为了页面好看,这个控件将隐藏Style="display: none",onchange:onchange事件是当我们在选择好文件后触发的事件,在本示例中为了简单这个onchange事件没有做实现,如果为了较好的用户体验的话可以在onChange事件中写入“上传中,请稍后”等友好的提示。
<asp:FileUpload runat="server" ID="FileUpload2" ToolTip="Intro" CssClass="fu" onchange="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":
//删除代码不实现,这个需要根据需求写。
}
}
- asp.net之Repeater ItemTemplate 图片上传 + 立即显示
- ASP.NET立即上传图片
- ASP.NET上传图片立即显示(不上传到服务器)
- asp.net 自定义控件实现无刷新上传图片,立即显示缩略图,保存图片缩略图
- 上传图片立即显示
- 上传图片后立即显示
- 按条件显示Repeater ItemTemplate中的控件
- ASP.NET的图片上传和显示
- asp.net上传图片并显示相册
- asp.net上传图片并显示
- 【ASP.NET 基础】图片上传和显示
- 上传后立即显示图片以及urldecode
- ASP.NET学习之Repeater
- Asp.Net 开发之图片上传
- asp.net实现上传图片显示本地绝对路径图片
- asp.net 庶罩层上传图片(二进制),并显示二进制图片
- ASP.NET 上传图片至数据库并读取图片显示
- ASP.NET上传图片至数据库并显示图片
- 解决:对 PInvoke 函数的调用导致堆栈不对称问题
- Java Web 开发之 Spring 体系结构
- 阿里面经之解答 by cmershen(3)——String/StringBuffer/StringBuilder,Java序列化,线程安全,线程同步,ThreadLocal
- Android自定义View基础学习
- DataTable 转 IEnumerable
- asp.net之Repeater ItemTemplate 图片上传 + 立即显示
- java中替换所有的IP地址
- 10004---弱矩阵、平衡型矩阵和强矩阵简介
- js实现打开页面弹出下载,加载背景图实现
- 正则表达式基本语法
- 大话设计模式--第23章 烤羊肉串引来的思考——命令模式
- java8 利用java7的date 做一个开始日期到结束日期 计算中间一共隔了多少日期
- view.getViewTreeObserver()
- RVIZ(一):Markers:sending Basic Shapes (C++)