1、长 春 大 学 课程设计纸共 9 页 第 1 页装订线一一 设计题目图片上传的设计与实现一一 设计目的运用 jsp 开发工具和数据库开发一个小型的基于 Web 系统。要求提交详细的设计说明书及各步骤所需图表和文档，对复杂的代码段和程序段，应画出程序流程图。在界面设计中，画出每个窗口的布局。通过本实践性教学环节，能较好地巩固 jsp 基本知识，jsp 连接数据库实现动态网页。一一 需求分析如今时代，互联网已经进入我们的生活，而互联网上就有图片上传，显示，访问等等功能，有着很大的市场空间。图片上传必须实现：1. 数据库访问模块：利用 JavaBean 封装对数据库的操作，主要包括连接数据库、添加、
2、删除、查询数据表、关闭连接等功能；2. 上传模块：通过上传组件实现图片的上传。3. 显示模块：提供图片信息列表的显示效果。4. 查看模块：点击可以显示图片的内容。一一 总体设计图片上传是指客户端通过 Web 应用程序将本地图片资源传输到服务器上。在客户端需要显示图片时，服务器端将图片通过网络以流的形式发送给客户端，然后利用不同的形式显示图片。图片上传必须要对电子相册有，用户注册，用户注册，添加相片，修改相册，用户反馈，管理用户，如图 1 所示。电子相册用户注册用户反馈修改相册添加相片用户注册管理用户图 1 总体设计长 春 大 学 课程设计纸共 9 页 第 2 页装订线一一 详细设计 1.文件上
3、传组件介绍文件上传组件是一些开源组织发布的针对实现文件上传功能的一组 class文件。jspSmartUpload 和 Apache 的 common-fileupload 是两个比较流行的文件上传组件。这两个组件都可以在 JSP 中实现文件上传。本节使用 Apache 的common-fileupload 组件实现图片上传。2.HTML 中文件上传组件介绍HTML 中元素可以创建文件上传组件。该控件带有一个文本框和浏览按钮。使用该组件时要注意以下几点。该元素必须出现在 form表单内。必须为该元素的 name 属性指定属性值。form 的 method 方法必须设置为 post。form 元
4、素 enctype 标签属性值必须设置为 multipart/form-data。要处理上载到服务器的文件，服务器必须有可以处理 multipart/form-data 提交的进程。mon-fileupload 组件简介common-fileupload 组件是 apache 的开源项目之一。用该组件可实现一次上传一个或多个文件，并可限制文件大小。可以从http:/jakarta.apache.org/commons/ fileupload/下载到该组件。该组件在许多其他开源项目中被使用，如 struts、WebWork 等。该组件由几个核心类组成，下面对这几个类进行简单的介绍。（1）Disk
5、FileUpload 类。（2）FileItem 类用来封装单个表单字段元素的数据，一个表单字段元素对应一个 FileItem 对象，通过调用 FileItem 对象的方法可以获得相关表单字段元素的数据。（3）FileUploadException 类。在文件上传过程中，可能发生各种各样的异常，如网络中断、数据丢失等。为了对不同异常进行适当的处理，Apache 文件上传组件还开发了 4 个异常类，其中 FileUploadException 是其他异常类的父类，其他几个类只是被间接调用的底层类，对于 Apache 组件调用人员来说，只需对 FileUploadException 异常类进行捕获
6、和处理即可。4文件在服务器端的存储形式在服务器端存储文件主要有两种方式：磁盘存储和数据库存储。在这里使用的是后者，利用数据库存储来将图片上传到服务器端。这两种存储方式各有长 春 大 学 课程设计纸共 9 页 第 3 页装订线利弊。利用数据库来存储这些资源会导致数据库的处理效率降低，但相对安全。利用磁盘来存储图片资源安全性相对来说比较低，但不会影响到处理的。File-tbl 表结构如图 1 所示。表 1 File-tbl 表结构字段名 类型 备注Id INTEGER 主键且自动增长filename VARCHAR(45) 文件名fileCotent MEDIUMBLOB 文件内容createDa
7、te TIMESTAMP 创建时间5页面的设计与实现（1）上传页面提供文件上传功能。该页面中有以下几个 HTML 标记元素。（2）图片列表页面将已经上传到服务器中的图片全部显示在页面中，图片名称以超链接形式显示在页面中，单击该超链接可以显示该图片名称对应的图片内容，如图 2 所示。图 2 图片列表页面的效果（3）图片显示页面，负责图片内容的显示，效果如图 3 所示。长 春 大 学 课程设计纸共 9 页 第 4 页装订线图 3 图片显示页面的效果代码实现如下：My JSP uploadimage.jsp starting page 8图片内容显示在上面代码中，从数据库中读取的图片内容是以 Blo
8、b 形式返回。Blob 是内置类型，它将二进制大对象(Binary Large Object)存储为数据库表某一行中的一个列值。该类型有几个常用方法，ServletResponse.getOutputStream()方法提供了一种输出流，用于向客户端发送二进制数据。ServletOutputStream 对象通常通过ServletResponse.getOutputStream()方法获取。图片内容显示如图 7 所示。图 7 图片内容显示代码实现如下：public class AdlistArraylist 长 春 大 学 课程设计纸共 9 页 第 8 页装订线private Connecti
9、on conn = null;private List list = new ArrayList();private BaseDBConnection db = new BaseDBConnection();private PreparedStatement pstm = null;private ResultSet rs = null;public List getPath(int type)String sql = “select path from adlist where type=“+type;/String s = “select path from adlist where ty
10、pe = “+type+“ order by id“;conn = db.getConn();try pstm = conn.prepareStatement(sql);rs = pstm.executeQuery();while(rs.next()list.add(rs);长 春 大 学 课程设计纸共 9 页 第 9 页装订线六 总结common-fileupload 组件提供了实现文件上传的功能，在 JSP 中可以借用该组件来实现图片上传的功能。使用 common-fileupload 组件来实现图片的上传。该组件主要使用 DiskFileUpload 和 FileItem 两个核心类来实现文件上传功能。熟悉并掌握这两个类中的关键方法将有助于学习 JSP 中实现图片上传技术。本章中也涉及到了数据库中存储大类型数据的知识，在 SQL Server 2000数据库中提供了 BLOB、MEDIUMBLOB、LONGBLOB 3 种数据类型来进行大类型数据的存储。本章中使用了 MEDIUNBLOB 类型来存储图片。在实现图片的存储和读取时使用了 InputStream 和 OutputStream 类这两个类主要应用于文件的读写操作。
