以下为引用的内容:
protected void Page_Load(object sender, EventArgs e) { string script = string.Format("addImg($get(''{0}''), $get(''{1}''), $get(''{2}''));", this.saveshoutoutimgs.ClientID, this.tbImgs.ClientID, this.tbOldImgs.ClientID); this.btAdd.Attributes.Add("onclick", script); }
|
代码建立在Ajax.net基础之上,环境是Visual Studio 2008 + Windows 2003,测试通过!
简单做一下说明:
1. <div id="saveshoutoutimg" runat="server"/>用来存放动态添加的文件相关标签。
2. btAddImage被点击后自身将被disabled掉,然后显示saveshoutoutaddimgs整个div。
3. 在saveshoutoutaddimgs中用户可以完成文件的选取和确认操作,chkAgree用来enable btAdd按钮。
4. 当用户点击btAdd时,触发onclick事件,该事件在code-behind的Page_Load方法中注册,因为脚本中涉及到使用服务端控件的ClientID属性,这样写比较方便。
5. 客户端函数addImg用来完成动态DOM的添加操作,它接收三个参数,第一个参数targetElement表示存放动态DOM的宿主DIV,第二个参数savestatsElement表示用于保存已添加文件信息的隐藏文本框,第三个参数oldimgElement表示用于保存在编辑状态下用户上一次上传的文件信息隐藏文本框。基本思路是复制browseimg下的input type="file"标签,然后将动态生成的DOM添加到saveshoutoutimgs下,并同时附加了一些事件。
6. tbImgs隐藏文本框用来保存用户已选文件的信息,以"|文件名1|文件名2|文件名3|..."的格式存放;tbOldImgs隐藏文本框中的值在编辑状态下才会得到,其中保存了用户上一次所上传文件的信息,存储格式与tbImgs相同。
7. 在编辑状态下,在服务端向saveshoutoutimgs标签添加与addImg脚本函数所生成的动态DOM相同的标签,并同时往tbOldImgs隐藏文本框中写入文件信息。我在这里写了一个示例,读者可以自己完善代码用以验证。在显示文件时我在文件的名称上添加了一个链接,这个链接所指向的页面用于输出图片,如通过得到的图片ID在数据库中检索图片的二进制数据然后Write到页面上。ImageEntity为自定义Image对象的实体类,用以存储图片文件的相关信息。
以下为引用的内容:
public void SetImages(List<ImageEntity> images) { if (images.Count > 0) { this.tbOldImgs.Text = "|"; foreach (ImageEntity image in images) { HtmlGenericControl imgDiv = new HtmlGenericControl("Div");
HtmlAnchor imgAnchor = new HtmlAnchor(); imgAnchor.HRef = string.Format("Thumbnail.aspx?isthumbnail=false&basecommentid={0}&imagetitle={1}", image.ID.ToString(), image.Title); imgAnchor.Target = "_blank"; imgAnchor.Title = image.Title; imgAnchor.InnerHtml = image.Title + " ";
HtmlImage imgButton = new HtmlImage(); imgButton.Src = "ShoutOut_Close.gif"; imgButton.Alt = "Delete"; imgButton.Attributes["onclick"] = string.Format("this.parentNode.parentNode.removeChild(this.parentNode);$get(''{0}'').value = updatehiddenimgs(''{1}'',$get(''{0}'').value);", this.tbOldImgs.ClientID, image.Title); imgButton.Attributes["onmouseover"] = "this.src=''ShoutOut_Close_rollover.gif''"; imgButton.Attributes["onmouseout"] = "this.src=''ShoutOut_Close.gif''";
imgDiv.Controls.Add(imgAnchor); imgDiv.Controls.Add(imgButton); this.saveshoutoutimgs.Controls.Add(imgDiv); this.tbOldImgs.Text += image.Title + "|"; } } }
public class ImageEntity { public ImageEntity() { }
public ImageEntity(int id, string title, Byte[] imageBlob, string type) { ID = id; Title = title; ImageBlob = imageBlob; Type = type; }
public int ID { get; set; } public string Title { get; set; } public string Type { get; set; } public Byte[] ImageBlob { get; set; } }
|
|