Java Web实践专题——图片管理

 
在一个网站中可能会存在大量的图片,有些图片对于所有的网页是相同的,例如网页的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(?,?,?)");
      //创建语句对象
      InputStream is = 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的内容。
 
  • 0
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值