ASP.NET 多附件上传实现代码

时间：2021-05-28

但基本前提都是事先通过js脚本来动态创建DOM，然后上传的时候在服务端做一下处理，有点类似于163的邮件系统。文件上传需要通过页面的POST方法进行提交，这个我在一次MOSS开发中iFrame表单提交的古怪问题解决一问中已经阐述过，其中包括了如何使用页面隐藏的iFrame来提交表单从而避免整个页面提交到服务器而导致页面的刷新。多附件上传的原理与之类似，只不过需要事先通过脚本在页面上动态创建多个input type='file'的标签，当然，如果要想功能更加完美，你可能还需要通过脚本动态添加一些按钮事件以让用户可以删除他所添加的文件。下面是一个应用效果的截图。

其中红色方框内的内容是通过脚本在页面上动态创建的，将用户在客户端所选文件的文件名动态添加到一个div里，同时在这个div中放一个隐藏的input type='file'的标签，它的value为用户所选文件的路径，然后在div中放置一个img，添加onmouseover和onmouseout事件为图片增加了一些鼠标滑动时的效果，onclick事件用来响应用户点击img时删除对应的文件。看一下代码中的具体实现。
复制代码 代码如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://mentid={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#代码来实现，这个不能简单地通过js脚本来实现，因为涉及到浏览器对客户端文件访问权限的限制。也就是说，需要将页面预先提交到服务器，判断完成后通知客户端接下来的行为，为了避免页面提交时客户端原有的状态丢失，可以采用隐藏iFrame的方式提交页面，这个在文章的一开始我已经提到过了。

总之，在Web中实现多附件上传必须借助于javascript来动态创建DOM，编辑状态下可以在服务端将事先处理好的DOM添加到页面上，并同时附件脚本事件，在服务端代码和客户端代码之间注意保存各个控件的状态。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章