图片上传的设计与实现
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊
图片上传的设计与实现
二．设计目的
运用jsp开发工具和数据库开发一个小型的基于Web系统。
要求提交详细的设计说明书及各步骤所需图表和文档，对复杂的代码段和程序段，应画出程序流程图。
在界面设计中，画出每个窗口的布局。
通过本实践性教学环节，能较好地巩固jsp基本知识，jsp连接数据库实现动态网页。
三．需求分析
如今时代，互联网已经进入我们的生活，而互联网上就有图片上传，显示，访问等等功能，有着很大的市场空间。
图片上传必须实现：
1.数据库访问模块：利用JavaBean封装对数据库的操作，主要包括连接
数据库、添加、删除、查询数据表、关闭连接等功能；
2.上传模块：通过上传组件实现图片的上传。
3.显示模块：提供图片信息列表的显示效果。
4.查看模块：点击可以显示图片的内容。
四．总体设计
图片上传是指客户端通过Web应用程序将本地图片资源传输到服务器上。
在客户端需要显示图片时，服务器端将图片通过网络以流的形式发送给客户端，然后利用不同的形式显示图片。
图片上传必须要对电子相册有，用户注册，用户注册，添加相片，修改相册，用户反馈，管理用户，如图1所示。
图1 总体设计
┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊
1.文件上传组件介绍
文件上传组件是一些开源组织发布的针对实现文件上传功能的一组class 文件。
jspSmartUpload和Apache的common-fileupload是两个比较流行的文件上传组件。
这两个组件都可以在JSP中实现文件上传。
本节使用Apache的common-fileupload组件实现图片上传。
2.HTML中文件上传组件介绍
HTML中<input type="file"/>元素可以创建文件上传组件。
该控件带有一个文本框和浏览按钮。
使用该组件时要注意以下几点。
该元素必须出现在form 表单内。
必须为该元素的name属性指定属性值。
form的method方法必须设置为post。
form元素enctype标签属性值必须设置为multipart/form-data。
要处理上载到服务器的文件，服务器必须有可以处理multipart/form-data提交的进程。
mon-fileupload组件简介
common-fileupload组件是apache的开源项目之一。
用该组件可实现一次上传一个或多个文件，并可限制文件大小。
可以从/commons/ fileupload/下载到该组件。
该组件在许多其他开源项目中被使用，如struts、WebWork等。
该组件由几个核心类组成，下面对这几个类进行简单的介绍。
（1）DiskFileUpload类。
（2）FileItem类用来封装单个表单字段元素的数据，一个表单字段元素对应一个FileItem对象，通过调用FileItem对象的方法可以获得相关表单字段元素的数据。
（3）FileUploadException类。
在文件上传过程中，可能发生各种各样的异常，如网络中断、数据丢失等。
为了对不同异常进行适当的处理，Apache文件上传组件还开发了4个异常类，其中FileUploadException是其他异常类的父类，其他几个类只是被间接调用的底层类，对于Apache组件调用人员来说，只需对FileUploadException异常类进行捕获和处理即可。
4．文件在服务器端的存储形式
在服务器端存储文件主要有两种方式：磁盘存储和数据库存储。
在这里使用的是后者，利用数据库存储来将图片上传到服务器端。
这两种存储方式各有
┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊利弊。
利用数据库来存储这些资源会导致数据库的处理效率降低，但相对安全。
利用磁盘来存储图片资源安全性相对来说比较低，但不会影响到处理的。
File-tbl表结构如图1所示。
表1 File-tbl表结构
5．页面的设计与实现
（1）上传页面提供文件上传功能。
该页面中有以下几个HTML标记元素。
（2）图片列表页面将已经上传到服务器中的图片全部显示在页面中，图片名称以超链接形式显示在页面中，单击该超链接可以显示该图片名称对应的图片内容，如图2所示。
图2 图片列表页面的效果
（3）图片显示页面，负责图片内容的显示，效果如图3所示。
┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊
图3 图片显示页面的效果
代码实现如下：
<PRE class=java name="code"><%@ page language="java" pageEncoding="gb2312"%> <%@ page
import="java.io.*,java.awt.Image,java.awt.image.*,com.sun.image.codec.jpeg.*, java.sql.*,com.jspsmart.upload.*,java.util.*"%>
<%@ page import="mainClass.*" %>
<html>
<head>
<title>My JSP 'uploadimage.jsp' starting page</title>
</head>
<body>
<%
SmartUpload sma=new SmartUpload();
long file_max_size=4000000;
String filename1="",ext="",testvar="";
6．文件上传处理
上传页面可以进行图片上传操作。
图片先被上传到服务器，再被文件上传
处理程序进行处理，最后存储到数据库中，
前面已经对common-fileupload组件进行了简单介绍，也对该组件中的几
个关键类进行了讲解。
在实现文件上传处理过程中，主要使用到DiskFileUpload
类和FileItem类，选择上传图片后的效果如图4所示。
┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊
图4 选择上传图片后的效果图片上传成功后的效果如图5所示：
图5 图片上传成功后的效果代码实现如下：
ext=myf.getFileExt();
int file_size=myf.getSize();
String saveurl="";
if(file_size < file_max_size){
Calendar cal=Calendar.getInstance();
String filename=String.valueOf(cal.getTimeInMillis()); saveurl=request.getRealPath("/")+url;
saveurl+=filename+"."+ext;
myf.saveAs(saveurl,sma.SAVE_PHYSICAL);
┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊ myclass mc=new myclass(request.getRealPath("data/data.mdb"));
mc.executeInsert("insert into [path]
values('uploadfiles/"+filename+"."+ext+"')");
out.println("图片上传成功!");
response.sendRedirect("showimg.jsp");
}
}
}catch(Exception e){
e.printStackTrace();
7．查询图片列表
从数据库中得到所有的上传图片信息，并且将结果显示在页面上。
图片名称字段是以超链接形式显示在页面中的。
这样的目的是要通过单击该超链接来显示该图片的内容。
执行以上代码便可以从数据库中得到所有的上传图片信息，并且将结果显示在页面上。
在上面的代码中，图片名称字段是以超链接形式显示在页面中的。
这样的目的是要通过单击该超链接来显示该图片的内容。
如图图片上传列表6所示。
图6 图片上传列表
代码实现如下：
┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊"age, addr) Values (" +
ISOtoGb2312.convert( request.getParameter("id")) + "," +
ISOtoGb2312.convert( request.getParameter("name")) + "," +
ISOtoGb2312.convert( request.getParameter("sex")) + "," +
ISOtoGb2312.convert( request.getParameter("age")) + "," +
ISOtoGb2312.convert( request.getParameter("addr")) + ")";
stmt.executeUpdate(strSQL);
ResultSet rs; //建立ResultSet(结果集)对象
rs = stmt.executeQuery("SELECT * FROM tab02"); //执行SQL语句
%>
<CENTER>
<TABLE bgcolor=pink>
<TR bgcolor=silver>
8．图片内容显示
在上面代码中，从数据库中读取的图片内容是以Blob形式返回。
Blob是内置类型，它将二进制大对象(Binary Large Object)存储为数据库表某一行中的一个列值。
该类型有几个常用方法，
ServletResponse.getOutputStream()方法提供了一种输出流，用于向客户端发送二进制数据。
ServletOutputStream对象通常通过ServletResponse.getOutputStream()方法获取。
图片内容显示如图7所示。
图7 图片内容显示
代码实现如下：
public class AdlistArraylist {
┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊private Connection 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 type = "+type+" order by id"; conn = db.getConn();
try {
pstm = conn.prepareStatement(sql);
rs = pstm.executeQuery();
while(rs.next()){
list.add(rs);
}
┊┊┊┊┊┊┊┊┊┊┊┊┊装┊┊┊┊┊订┊┊┊┊┊线┊┊┊┊┊┊┊┊┊┊┊┊┊六．总结
common-fileupload组件提供了实现文件上传的功能，在JSP中可以借用该组件来实现图片上传的功能。
使用common-fileupload组件来实现图片的上传。
该组件主要使用DiskFileUpload和FileItem两个核心类来实现文件上传功能。
熟悉并掌握这两个类中的关键方法将有助于学习JSP中实现图片上传技术。
本章中也涉及到了数据库中存储大类型数据的知识，在SQL Server 2000数据库中提供了BLOB、MEDIUMBLOB、LONGBLOB 3种数据类型来进行大类型数据的存储。
本章中使用了MEDIUNBLOB类型来存储图片。
在实现图片的存储和读取时使用了InputStream和OutputStream类这两个类主要应用于文件的读写操作。