ASP.NET多附件上传和附件编辑的实现

因为脚本中涉及到使用服务端控件的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 + "&nbsp;&nbsp;";

            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; }
}
     有一个问题需要注意，当保存编辑状态下的数据时，在服务端需要重新删除原有图片然后再重新添加图片，对于用户未在客户端修改的图片，则需要在保存数据前通过tbOldImgs隐藏域中的相关信息重新检索得到图片数据，然后重新保存图片。例如编辑状态下得到A、B、C三张图片，用户删除了图片C，添加了图片D，则保存时在服务端这样操作：先通过tbOldImgs隐藏域得到剩余的旧图片信息（即图片A和图片B），从数据库中检索出这些图片的数据，保存前先删除与该条数据相关的所有已上传图片，然后与得到的新图片（即图片D）一并存入数据库中。

    还有一点就是，如果想要实现上传图片前判断图片文件的大小，必须通过C#代码来实现，

上一页  [1] [2] [3] 下一页

【责编:Luzi】