Personal Web Site案例解析系列六

    【IT168 学院频道】在基于PWS的Web站点中，相册是一个核心功能，其主要实现了两大功能：一、相册、照片的相关信息管理等，二、存储和显示照片功能。前者的实现比较简单，主要涉及文本数据的数据访问和存储，这不是本文说明的重点。后者则相对复杂，其中包括在数据库中存储二进制格式图片，从数据库中获取二进制图片数据并以图片格式显示在页面上等。本文介绍实现照片存储，显示和自定义分页的方法。

    1  实现照片存储

    在Web站点中，只有Administrators角色的用户才能进行照片存储。首先，用户需要登录，然后选择相关相册，此时将加载Admin文件夹下的Photos.aspx页面。如图1显示了该页面截图。

图1(点击看大图)

    如图1所示，页面左部包括一个"导入"按钮和一个图片名称列表。当用户在应用程序根目录下Upload文件夹内存储多个Jpg文件后，Photos.aspx页面将自动获取图片文件名称（仅限*.jpg文件），并以列表形式显示在页面中。由上图可知，Upload文件夹内已经包括3个Jpg文件。当用户单击"导入"按钮后，这3个Jpg文件将自动上载至数据库。在页面右上部包括FileUpload、TextBox和Button控件，它们可帮助用户实现单个图片上载任务。首先，单击"浏览"按钮选择本地需要上传的图片，然后，在TextBox中添加图片标题，最后，单击"添加"按钮提交页面。此时，用户所选中的本地图片将上传，并存储到数据库的数据表中。在页面右下部列举了相册中的所有照片，其中包括照片缩略图、图片标题、重命名和删除按钮。

    由以上内容可知，Photos.aspx页面实现了3项功能：（1）批量上载照片；（2）添加单个照片；（3）以缩略图形式显示当前相册中的照片列表。

    （1）实现批量上载图片

    实现批量上载图片包括两个内容：一是从Upload文件夹中获取照片文件名称数据，并显示在Photos.aspx页面，二是将照片批量存储到数据库中。这其中涉及从文件夹中获取文件信息，数据绑定与显示、照片文件以二进制方式存储等内容。如下列举了Photos.aspx文件中的相关源代码。

<div id="sidebar">     <h4>批量上载照片</h4>     <p>在"上载"<b></b>文件夹中找到下列文件。单击"导入"<b></b>可将这些图片导入到相册中。此操作可能需要一段时间。</p>     <asp:ImageButton ID="ImageButton1" Runat="server" onclick="Button1_Click" SkinID="import" />     <br /><br />     <asp:datalist runat="server" id="UploadList" repeatcolumns="1" repeatlayout="table" repeatdirection="horizontal" DataSourceID="ObjectDataSource2">         <itemtemplate>             <%# Container.DataItem %>         </itemtemplate>     </asp:datalist> </div> ...... <asp:ObjectDataSource ID="ObjectDataSource2" Runat="server" TypeName="PhotoManager" SelectMethod="ListUploadDirectory" > </asp:ObjectDataSource>

    如上代码所示，其中主要包括ImageButton、DataList和ObjectDataSource控件。

    ImageButton用于呈现"导入"按钮，其中定义了单击事件处理程序Button_Click1，即实现照片批量存储功能。ObjectDataSource控件中设置了TypeName和SelectMethod属性。TypeName属性用于设置ObjectDataSource控件表示的类名称。SelectMethod属性用于设置由ObjectDataSource 控件调用以检索数据的方法名称。通过该控件以及相关类中的方法可以获取Upload文件夹中Jpg文件名称集合。DataList控件与ObjectDataSource控件绑定，从而以自定义方式显示Jpg文件名称集合。

    下面列举了Button_Click1事件处理程序源代码。

protected void Button1_Click(object sender, ImageClickEventArgs e) {     // 获取DirectoryInfo实例     DirectoryInfo d = new DirectoryInfo(Server.MapPath("~/Upload"));     // 将Upload文件夹中所有Jpg文件存储到数据库中     foreach (FileInfo f in d.GetFiles("*.jpg"))     {         byte[] buffer = new byte[f.OpenRead().Length];         f.OpenRead().Read(buffer, 0, (int)f.OpenRead().Length);         PhotoManager.AddPhoto( Convert.ToInt32( Request.QueryString["AlbumID"]), f.Name, buffer);     }     // 数据绑定     GridView1.DataBind(); }

    以上源代码来自Photos.aspx.cs文件。当用户单击"导入"按钮时，将引发该事件处理程序。首先，获取一个来自Upload文件夹的DirectoryInfo类实例，然后，利用foreach语句执行迭代过程，以便将Upload文件夹中的所有*.jpg文件以二进制格式存储到数据库中。在这个迭代过程中，关键是调用了PhotoManager类的AddPhoto静态方法来实现数据存储。下面列举了该方法源代码。

public static void AddPhoto(int AlbumID, string Caption, byte[] BytesOriginal) {     using (SqlConnection connection = new SqlConnection(ConfigurationManager.ConnectionStrings["Personal"].ConnectionString))     {         using (SqlCommand command = new SqlCommand("AddPhoto", connection))         {             command.CommandType = CommandType.StoredProcedure;             command.Parameters.Add(new SqlParameter("@AlbumID", AlbumID));             command.Parameters.Add(new SqlParameter("@Caption", Caption));             command.Parameters.Add(new SqlParameter("@BytesOriginal", BytesOriginal));             command.Parameters.Add(new SqlParameter("@BytesFull", ResizeImageFile(BytesOriginal, 600)));             command.Parameters.Add(new SqlParameter("@BytesPoster", ResizeImageFile(BytesOriginal, 198)));             command.Parameters.Add(new SqlParameter("@BytesThumb", ResizeImageFile(BytesOriginal, 100)));             connection.Open();             command.ExecuteNonQuery();         }     } }

    以上代码来自App_Code文件夹下PhotoManager.cs文件，这些代码实现了AddPhoto方法，实现过程涉及一些数据访问的常见内容，例如，创建SqlCommand对象、设置参数、执行存储过程等等。如上代码所示，在实现过程中嵌套使用了using代码块。这可能是读者不常用到的内容。using具有强大的功能，例如，引入命名空间、设置别名。同时，using还可以定义一个代码块（或者说一个范围，如本例中使用{}设定的范围）。当执行到代码块之外时，系统将自动释放一个或者多个对象。这种实现方法可以尽快释放诸如文件句柄和数据库连接这样的有限资源。同时，代码结构也变得更加清晰美观。另外，需要注意的是，为using语句提供的对象必须实现IDisposable接口。此接口提供了Dispose方法，该方法将释放此对象的资源。

    如上文所述，在实现批量上载照片过程还包括显示Upload文件夹内的Jpg文件名称集合。这其中涉及ObjectDataSource和DataList控件。前者用于获取文件名称集合，后者用于以自定义方式显示这些文件名称。在获取文件名称集合过程中，使用了ListUploadDirectory方法。下面列举了该方法的源代码。

public static ICollection ListUploadDirectory() {     DirectoryInfo d = new DirectoryInfo(System.Web.HttpContext.Current.Server.MapPath("~/Upload"));     return d.GetFileSystemInfos("*.jpg"); }

    以上代码来自PhotoManager.cs文件。整个实现过程很简单。首先，获取一个来自Upload文件夹的DirectoryInfo类实例，然后，调用该实例的GetFileSystemInfos方法，从而获取ICollection类型的文件集合数据。这种类型的数据可通过数据绑定到DataList控件上，从而方便实现数据显示。

更多热点：Photoshop 视频教程 图片教程 开发速查手册