9.3 搭建数据库
字段名称 ID Title Url Type Size CreateDate 数据类型 int varchar(200) varchar(255) varchar(50) int datetime 是否主键 是 否 否 否 否 否 默认值 递增1 Null Null Null Null Null 功能描述 编号 标题 图片地址 图片的类型 图片的大小 上传时间
9.8 文件上传处理
• 9.8.1 多文件上传处理 • 多文件上传处理是指在页面的上传表单内能同时选择多个文件进行 上传处理。 • 1．上传表单文件 • 2．上传处理文件 • 9.8.2 文件自动上传处理 • 文件自动上传处理是指在页面上传表单内选择上传文件后，不用使 用激活按钮即可自动实现上传处理。 • 1．上传表单文件 • 2．上传框架文件 • 3．上传表单处理文件 • 4．上传框架处理文件
9.6 创建缩略图模块
• 创建系统图片缩略图的实现流程如下所示： • （1）用户单击列表页面的 图标，应用程序进行页面重定向处理。 • （2）激活页面CreateSuo.aspx.cs，引入命名空间Drawing和 AjaxFileImage。 • （3）Page_Load初始化处理，获取源图文件的地址，并保存在url中。 • （4）根据url创建缩略图的保存地址。 • （5）调用函数CreateThumbImage，创建图片的缩略图。 • 函数CreateThumbImage的实现过程比较复杂，具体流程如下所示： • （1）根据sourcePath导入源图，并获取源图的高度和宽度。 • （2）根据缩放方式，设置缩略图的大小。 • （3）设置缩略图大小值后，根据值创建一张缩略图。 • （4）设置缩略图的高质量插值法和平滑模式。 • （5）清空画布颜色，并设置背景为透明。 • （6）开始绘制缩略图，并将绘制后的缩略图保存在指定位置—— SuoImages文件夹内。
• 系统配置文件：功能是对项目程序进行总体配置。 • 系统设置文件：功能是对项目内程序进行总体设置。 • 数据库文件：功能是搭建系统数据库平台，保存系统上传文件的数据。 • 系统文件列表：功能是将系统内的上传文件以列表样式显示出来。 • 上传处理模块文件：功能是提供图片上传表单，将指定图片上传到指定位置， 包括上传表单文件和上传处理文件。 • 验证码处理文件：功能是提供验证码显示效果，具体可以通过两种方式实现。 • 创建缩略图模块文件：功能是创建指定图片的缩略图。 • 创建水印图模块文件：功能是创建指定图片的水印图。
第9章 美图秀秀处理
• 在Web系统的开发过程中，为满足系统的特殊需要，有时需
要对系统内的图片和文件进行特殊处理，如进行文件上传和
创建图片水印等。 • 在本章的内容里，将介绍美图处理系统的运行流程，并通过 具体实例来讲解美图处理项目的实现过程。
9.1 项目规划分析
• 9.1.1 美图处理系统功能原理 • Web站点的用户美图处理系统比较简单，其主要功能是对系统数据 进行验证处理。如果数据非法，则不能登录；如果系统合法，则可 以登录。 • 在实现过程中，会根据情况，编写一些特定的功能模块来实现特定 验证，如验证码文件和注销登录等。 • 一个完整美图处理系统的必备功能如下所示。
9.4 实现数据访问层
• 9.4.1 定义FileImage类 • 本功能模块的数据访问层功能由文件User.cs实现，其主要功能是在 ASPNETAJAXWeb.AjaxInstantMessaging空间内建立UserInfo类和User类， 并定义多个方法，以实现对数据库中用户数据的处理。 • 9.4.2 获取上传文件信息 • 获取上传文件信息即获取系统库内已上传的文件信息，其功能是由方法 GetFiles()实现的。方法GetFiles()的具体实现流程如下所示。 • （1）从系统配置文件Web.config内获取数据库连接参数，并将其保存在 connectionString内。 • （2）使用连接字符串创建con对象，实现数据库连接。 • （3）新建获取数据库数据的SQL查询语句。 • （4）创建获取数据的对象da。 • （5）打开数据库连接，获取查询数据。 • （6）将获取的查询结果保存在ds中，并返回ds。
9.5 列表显示系统文件
• 9.5.1 列表显示页面 • 文件Default.aspx的功能是，插入专用控件将系统内数据读取并显示出来。 其具体实现流程如下所示。 • （1）插入1个GridView控件，以列表样式显示库内的数据。 • （2）插入2个ImageButton控件分别作为缩略图和水印图的激活按钮。 • （3）调用Ajax程序集内的HoverMenuExtender控件，实现动态显示缩略 图功能。 • （4） 调用Ajax程序集内的HoverMenuExtender控件，实现动态显示水印 图功能。 • 9.5.2 列表处理页面 • （1） 定义BindPageData，获取并显示库内数据。 • （2） 定义gvFile_PageIndexChanging，设置新页面并绑定数据。 • （3）定义FormatImageButtonVisible，对获取到的地址进行判断处理。 • （4） 定义gvFile_RowCommand，根据用户需求进行页面重定向处理。
• • • • 文件上传模块：提供上传表单，用于实现指定文件的上传处理。 创建于创建指定图片的水印图。 搜索模块：用于帮助用户迅速检索到指定的文件。
9.1 项目规划分析
• 9.1.3 规划项目文件 • 新建文件夹Tuwen和data来保存项目的实现文件。其中，文件夹Tuwen用 于保存系统的项目文件，文件夹data用于保存系统的数据库文件。 • 规划各构成模块的实现文件，具体说明如下所示。
• 2．配置Ajax服务器参数
• <pages> • <controls> • <add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/> • <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/> • </controls> • </pages>
• • • • 预先设置处理表单，实现指定文件格式的上传处理。 为确保文件的版权信息，为上传的文件创建水印图片。 为减少上传文件的占用空间，为上传文件创建缩略图。 为方便用户浏览系统文件，设置专用检索系统来迅速查找指定的上传 文件。
9.1 项目规划分析
• 9.1.2 系统构成模块 • 一个典型用户美图处理系统的构成模块如下所示。
9.9 项目总结——学习代码封装
• 经过上述步骤操作处理后，将在ValidateCode\bin\Debug文件夹内自动 生成一个验证码程序集文件ValidateCode.dll。读者可以将其复制到自 己项目的bin文件夹内，然后引用它。具体操作流程如下所示： • （1）将ValidateCode.dll复制在自己项目的bin文件夹内。 • （2）将需要调用ValidateCode.dll的文件放在自己项目的根目录下，即 和bin文件夹同级的目录下。 • （3）右键单击“解决方案管理器”中的bin节点，然后选择“添加引 用”选项。 • （4）在弹出的“添加引用”对话框内单击“浏览”按钮，然后找到 bin文件夹内的ValidateCode.dll，将其引用到项目中。
9.2 实现系统配置文件
• 3．系统设置文件 • 本实例的系统设置文件是ASPNETAJAXWeb.cs，其主要功能是设置系 统内数据函数的参数，包括上传文件的存放目录、缩略图的存放目录、 水印图的存放目录、创建缩略图的宽度和高度、每次上传文件的数量 限制、允许上传文件类型的限制以及允许上传图片类型的限制。
9.4 实现数据访问层
• 9.4.4 删除上传文件信息 • （1 ）从系统配置文件Web.config内获取数据库连接参数，并将其保 存在connectionString内。 • （2）使用连接字符串创建con对象，实现数据库连接。 • （3）使用SQL删除语句，然后创建cmd对象，准备删除操作。 • （4）打开数据库连接，执行新数据删除操作。 • （5）将数据删除操作所涉及的行数保存在result中。 • （6）删除成功，则返回result值。删除失败，则返回-1。
9.7 为图片创建水印块
• 创建水印图模块功能是由如两个文件实现的：
• 文件CreateShui.aspx：中间页面，用于调用水印处理文件 CreateSuo.aspx.cs。 • 文件CreateShui.aspx.cs：用于创建系统指定图片的水印图。
• 创建系统图片水印图的实现流程如下所示： • （1）用户单击列表页面的 图标，应用程序进行页面重定向处理。 • （2） 激活页面CreateShui.aspx.cs，引入命名空间Drawing和 AjaxFileImage。 • （3） Page_Load初始化处理，获取源图文件的地址，并保存在url 中。 • （4） 根据url创建水印图的保存地址。 • （5）调用函数CreateWatermarkImage，创建图片的水印图。
9.9 项目总结——学习代码封装
• 在技术中，为了系统程序的安全，有时需要将重要的代码进 行封装处理。下面以验证码文件为例，介绍将类文件转换为程序集的 流程。 • （1）在Visual Studio 2012中新建项目，选择模板为类库，命名为 ValidateCode。 • （2）修改文件Class1.cs的名称为ValidateCode.cs，然后将文件 Yanzhengma.cs的代码复制进来。 • （3）右键单击“解决方案管理器”中的ValidateCode项目，然后选择 “属性”选项。 • （4）在弹出对话框中设置程序集名称为 ASPNETAJAXWeb.ValidateCode，默认命名空间为 ASPNETAJAXWeb.ValidateCode.Page。