在一个网站中可能会存在大量的图片,有些图片对于所有的网页是相同的,例如网页的LOGO,主页中的图片,这些图片就像普通的html文件一样,这些图片的处理通常使用网页编辑工具来完成的,也就是说通常是由美工完成的。主要使用下面的html标签:
<img alt="" src=""/>
其中src指定文件的路径,使用相对路径,通常我们会在web应用中专门创建一个文件夹images存放所有的图片。
这些图片的处理一般不需要Java程序员管理。还有一些图片是与程序员需要考虑的,例如,网站有一个留言板,在留言的时候用户可以选择表情,表情是一个非常简单的图片,每个用户留言都会选择一个,如果不选择,系统也会给一个默认的。这里使用图片的特点是、大家共享这么多的图片,不管怎么选择,都是从中选择。对于这种图片的处理通常的做法:在记录留言的同时,记录图片的编号,这样在显示的时候根据图片的编号查找图片本身。
另外还有一种情况,如果系统要保存所有用户的照片,这些照片对于不同的用户是不相同的,这时候如果采用上面的方式图片从完成的功能来说也可以,但是管理起来不方便,更合理的方式应该使用数据库。通常通过上传的方式把图片上传到服务器,然后存储到数据库,然后需要的时候,从数据库提取然后显示。
下面分别对两种处理图片的方式进行介绍。
通过路径管理图片
这种方式下,为了访问文件方便,需要对文件名进行特殊设置,例如上面所说的20种表情图片,可以使用image01.gif、image02.gif、image03.gif等等。
(1) 路径的生成
首先在html文件中单选按钮让用户选择,例如下面的代码展示了20种被选择的表情,使用上面说的文件名命名方式。
请选择表情:<br>
<input type="radio" name="mode" value="01"/>
<img alt="表情1" src="images/image01.gif" />
<input type="radio" name="mode" value="02"/>
<img alt="表情2" src="images/image02.gif" />
<input type="radio" name="mode" value="03"/>
<img alt="表情3" src="images/image03.gif" />
…
这里需要注意的mode是单选按钮的名字,处理文件中会根据这个名字获取用户选择的信息,value对应的某个选项的值,如果你选择第一个图片,则单选按钮的值就是01。img标签用于显示表情图片。
然后在处理文件中获取这个参数,把它保存到数据库中,获取信息,可以通过下面的代码完成:
request.getParameter(“mode”);
如何向数据库中存储,请参考本书中关于数据库部分。
(2) 根据路径信息生成图片
首先,需要从数据库中获取到要显示的图片的路径信息,访问数据库的过程请参考本书中关于数据库部分。假设获取的信息保存在str中,通常我们会先保存到request中,通过下面的代码:
request.setAttribute(“mode”,str);
然后在页面中显示,需要根据这个路径确定文件名,所以img标签中的文件名部分需要根据这个变量确定。
原来的格式为:
<img src="images/image01.gif" />
需要把01替换成变量,使用表达式:
<img src="images/image${requestScope.mode}.gif" alt=""/>
使用下面的代码也可以得到相同的效果:
<%
String str = (String)request.getAttribute("mode");
out.println("<img src=\"images/image"+str+".gif\" alt=\"\"/>");
%>
或者
<%
String str2 = (String)request.getAttribute("mode");
%>
<img src="images/image<%=str2%>.gif" alt=""/>
使用存储路径的方式的思路非常简单,存储图片的信息到数据库中,不一定是全部信息,只要能确定图片即可,然后根据数据库中的信息构造图片的路径显示路径。
通过数据库存储图片
在数据库中存储图片,需要使用BLOB类型的字段,BLOB用于存储字节流对象。假设我们要管理用户信息,为了简化,这里用户信息包括用户名、用户编号和照片,表的定义语句如下:
create table user
(
userid varchar(10) primary key,
username varchar(10),
picture blob
)
下面分别对图片的上传、存储和显示进行介绍。
(1)图片的上传
文件的上传功能我们使用Struts中提供的上传功能。首先需要创建上传的界面,对应的代码如下:
<%@ page contentType="text/html; charset=GBK" %>
<%@ taglib uri="/WEB-INF/struts-html.tld" prefix="html" %>
<html>
<head>
<title>
adduser
</title>
</head>
<body bgcolor="#ffffff">
<h1>
JBuilder Generated JSP
</h1>
用户添加<br>
<html:form action="addAction.do" method="post" enctype="multipart/form-data">
用户编号:<html:text property="userid"/><br>
用户名:<html:text property="username"/><br>
照片:<html:file property="picture"/>
<html:submit>
</html:submit>
</html:form>
</body>
</html>
注意:请求方式是post,enctype的值为“multipart/form-data”。
需要创建一个Form用于传值:
package picturetest;
import org.apache.struts.action.ActionForm;
import org.apache.struts.upload.FormFile;
import org.apache.struts.action.ActionErrors;
import org.apache.struts.action.ActionMapping;
import javax.servlet.http.HttpServletRequest;
public class AddActionForm
extends ActionForm {
private FormFile picture;
private String userid;
private String username;
public FormFile getPicture() {
return picture;
}
public void setPicture(FormFile picture) {
this.picture = picture;
}
public void setUsername(String username) {
this.username = username;
}
public void setUserid(String userid) {
this.userid = userid;
}
public String getUserid() {
return userid;
}
public String getUsername() {
return username;
}
public ActionErrors validate(ActionMapping actionMapping,
HttpServletRequest httpServletRequest) {
/** @todo: finish this method, this is just the skeleton.*/
return null;
}
public void reset(ActionMapping actionMapping,
HttpServletRequest servletRequest) {
}
}
(2)图片的存储
图片的存储应该创建单独的类来完成,因为代码太多,这里简化,直接在Action中完成对信息的添加。
package picturetest;
import org.apache.struts.action.ActionMapping;
import org.apache.struts.action.ActionForm;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.ActionForward;
import org.apache.struts.action.Action;
import org.apache.struts.upload.FormFile;
import java.sql.*;
import java.io.*;
public class AddAction
extends Action {
public ActionForward execute(ActionMapping mapping, ActionForm form,
HttpServletRequest request,
HttpServletResponse response) {
AddActionForm addActionForm = (AddActionForm) form;
String uid = addActionForm.getUserid();
String username = addActionForm.getUsername();
FormFile file = addActionForm.getPicture();
System.out.println(file.getFileSize());
if(file == null)
return mapping.findForward("success");
try
{
Class.forName("com.mysql.jdbc.Driver");
//加载驱动程序
Connection con
= DriverManager.getConnection("jdbc:mysql://localhost:3306/webtest","root","");
//创建连接
PreparedStatement pstmt = con.prepareStatement("insert into user values(?,?,?)");
//创建语句对象
InputStreamis = file.getInputStream();
//根据文件创建输入流
pstmt.setString(1,uid);
//为sql语句中的第一个变量赋值
pstmt.setString(2,username);
//为sql语句中的第二个变量赋值
pstmt.setBinaryStream(3,is,file.getFileSize());
//为sql语句中的第三个变量赋值,就是文件输入流
pstmt.execute();
//执行sql语句
is.close();
//关闭输入流
pstmt.close();
//关闭语句对象
con.close();
//关闭连接对象
}catch(Exception e)
{
System.out.print(e.toString());
}
request.setAttribute("userid",uid);
request.setAttribute("username",username);
return mapping.findForward("success");
}
}
把图片存入数据库的过程主要是先根据文件创建输入流,然后把该输入流作为参数添加到数据库中。保存图片使用:
pstmt.setBinaryStream(3,is,file.getFileSize());
其中,第一个参数3表示为sql语句中的第三个变量赋值,也就是第3个问号指定的变量,第二个参数is表示输入流,第三个参数表示图片的大小。
如果这里的图片不是上传的,而是位于文件系统中,操作过程也非常类似:
String str = getServletContext().getRealPath("code.gif");
File file = new File(str);
InputStream fis = new FileInputStream(file);
主要创建一个从图片的输入流即可,前面的是从上传文件的输入流,这里是从磁盘文件的输入流,后面我们还会介绍从内存图片的输入流。接下来向数据库中存储的过程是相同的。
(3)图片的显示
图片本身的显示通常伴随有其它信息的显示,这里把这个用户的所有信息都显示出来,但是文本类信息与图片信息本身的显示过程不同,所以这里使用两个文件:第一个文件用于显示图片本身,第二个文件用于显示其它信息以及关联到图片上。
显示图片的文件:
<%@page contentType="image/jpeg"%>
<%@page import="java.sql.*"%>
<%@page import="java.io.*"%>
<%
String driver = "com.mysql.jdbc.Driver";
String url = "jdbc:mysql://127.0.0.1:3306/webtest";
try {
String userid = request.getParameter("userid");
//获取要显示的用户的ID
Class.forName(driver);
//加载驱动程序
Connection con = DriverManager.getConnection(url, "root", "");
//创建连接
String sql = "select picture from user where uid='"+userid+"'";
//String sql = "select picture from user where uid='00006789'";
PreparedStatement pstmt = con.prepareStatement(sql);
//创建语句对象
ResultSet rs = pstmt.executeQuery();
//查询的结果集
rs.next();
InputStream is = rs.getBinaryStream(1);
//从数据库中读取图片数据
byte b[] = new byte[8192];
//创建字节数组,用于接收数据
OutputStream os = response.getOutputStream();
//获取输出流
int i;
while ((i=is.read(b)) > 0) { //从输入流读取数据
os.write(b); //然后把读取的数据进行输出
}
os.close();
is.close();
rs.close();
pstmt.close();
con.close();
//关闭相关对象
}
catch (Exception e) {
out.println(e.toString());
}
%>
需要注意几个地方:
Ø page属性的contentType属性的值为:image/jpeg;
Ø 读取图片,使用rs.getBinaryStream(1);
Ø 需要获取输出流:OutputStream os = response.getOutputStream();
Ø 把需要显示的照片的用户ID传递过来。
显示所有信息的文件:
<%@ page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
userinformation
</title>
</head>
<body bgcolor="#ffffff">
<h1>
用户信息:
</h1>
用户编号:${requestScope.userid}<br>
用户名:${requestScope.username}<br>
照片:<img alt="照片" src="picture.jsp?userid=${requestScope.userid}" />
</body>
</html>
注意:照片:<img alt="照片" src="picture.jsp?userid=${requestScope.userid}" />,picture.jsp的作用就是生成图片,src的值为picture.jsp就是把picture.jsp生成的图片作为一个静态图片使用了,使用“?”号把要显示的用户ID传递给picture.jsp文件。
这里不再给出配置文件struts-configure.xml的内容。