用Seam实现：图片上传 + 保存到数据库 + 从数据库读出图片并显示到页面中

上传图片并保存到数据库

seam给我们提供了 s:fileUpload 标签以完成文件上传功能．使用该标签时，要在web.xml中声明一个Seam的过滤器：

[html] view plain copy

print?

1. <filter>  
2.   <filter-name>Seam Filter</filter-name>  
3.   <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class>  
4. </filter>  
5.   
6. <filter-mapping>  
7.   <filter-name>Seam Filter</filter-name>  
8.   <url-pattern>/*</url-pattern>  
9. </filter-mapping>  

<filter>  <filter-name>Seam Filter</filter-name>  <filter-class>org.jboss.seam.servlet.SeamFilter</filter-class></filter><filter-mapping>  <filter-name>Seam Filter</filter-name>  <url-pattern>/*</url-pattern></filter-mapping>

s:fileUpload 标签主要属性：

• data: 需绑定一个byte[] 数组，用来接收上传的二进制数据．
• fileName: 上传文件的文件名
• accept: 允许上传的文件类型，可取 “images/png”, “images/jpg”．

用法示例：

[html] view plain copy

print?

1. <h:form enctype=“multipart/form-data” id=“upload-form”>  
2.                                 <s:fileUpload data=“#{memberHome.instance.avator}” fileName=“#{memberHome.fileName}” />  
3.                                 <h:commandButton value=“上传照片” action=“#{memberHome.update()}”  
4.                                     styleClass=“btn btn-primary btn-small”>  
5.                                 </h:commandButton>  
6.                             </h:form>  

<h:form enctype="multipart/form-data" id="upload-form">                                <s:fileUpload data="#{memberHome.instance.avator}" fileName="#{memberHome.fileName}" />                                <h:commandButton value="上传照片" action="#{memberHome.update()}"                                    styleClass="btn btn-primary btn-small">                                </h:commandButton>                            </h:form>

这里 avator 是一个byte[]数组，fileName是一个String对象．注意必须在form中使用 “multipart/form-data” 的编码类型．

当用户选择好图片，点击”上传照片”后，图片数据会首先被保存到Member实体Bean中的avator属性中，随后memberHome的update()方法被调用，JPA会把avator中的数据持久化到数据库中．

从数据库中读出图片并在页面中显示

要显示图片，可以使用<img>标签．但由于图片是保存在数据库中的，所以无法用将img的src属性设置为图片路径的方式来显示图片．这时候我们可以使用Servlet来完成这一功能．即将src指向一个Servlet，由这个Servlet负责把图片从数据库中取出并返回．

要在Servlet中访问数据数，可以先通过JNDI查询返回一个DataSource(数据源)，通过DataSource的getConnection()方法来建立与数据库的连接，即使用JDBC访问数据库．

JNDI查询方法如下：

[java] view plain copy

print?

1. private DataSource getDS() throws NamingException {  
2.         Context context = new InitialContext();  
3.         return (DataSource) context.lookup(“zhiduiDatasource”);  
4.     }  

private DataSource getDS() throws NamingException {        Context context = new InitialContext();        return (DataSource) context.lookup("zhiduiDatasource");    }

lookup()中要传递你要查询的对象的名称，即在persistence.xml中<jta-data-source>节点所声明的数据源．有关JNDI的详细说明，参见Oracle官方指南：http://docs.oracle.com/javase/7/docs/technotes/guides/jndi/

之后就可以从数据库中读出图片数据了：

[java] view plain copy

print?

1. private void getImageByte() {  
2.         DataSource ds = null;  
3.         Connection conn = null;  
4.           
5.         try {  
6.             ds = getDS();  
7.             conn = ds.getConnection();  
8.             Statement stat = conn.createStatement();  
9.             ResultSet res = stat.executeQuery(”select * from member where id=’” + memberId + “’”);  
10.               
11.             while(res.next()) {  
12.                 imageByte = res.getBytes(”avator_file”);  
13.             }  
14.   
15.         } catch(SQLException ex) {  
16.             ex.printStackTrace();  
17.         } catch(NamingException ex) {  
18.             ex.printStackTrace();  
19.         } finally {  
20.             try {  
21.                 conn.close();  
22.             } catch(SQLException ex) {  
23.                 ex.printStackTrace();  
24.             }  
25.         }  
26.   
27.     }  

private void getImageByte() {        DataSource ds = null;        Connection conn = null;        try {            ds = getDS();            conn = ds.getConnection();            Statement stat = conn.createStatement();            ResultSet res = stat.executeQuery("select * from member where id='" + memberId + "'");            while(res.next()) {                imageByte = res.getBytes("avator_file");            }        } catch(SQLException ex) {            ex.printStackTrace();        } catch(NamingException ex) {            ex.printStackTrace();        } finally {            try {                conn.close();            } catch(SQLException ex) {                ex.printStackTrace();            }        }    }

最后在doGet()方法中将读出的byte[]数据返回：

[java] view plain copy

print?

1. @Override  
2.     protected void doGet(HttpServletRequest req, HttpServletResponse resp)  
3.             throws ServletException, IOException {  
4.         String parm = req.getParameter(”memberId”);  
5.         memberId = Integer.parseInt(parm);  
6.           
7.         getImageByte();       
8.         resp.getOutputStream().write(imageByte, 0, imageByte.length);  
9.     }  

@Override    protected void doGet(HttpServletRequest req, HttpServletResponse resp)            throws ServletException, IOException {        String parm = req.getParameter("memberId");        memberId = Integer.parseInt(parm);        getImageByte();             resp.getOutputStream().write(imageByte, 0, imageByte.length);    }

别忘了在web.xml中声明你的ImageServer并配置URL映射：

[html] view plain copy

print?

1. <servlet>  
2.         <servlet-name>Image Servlet</servlet-name>  
3.         <servlet-class>cn.edu.sudt.zhidui.servlet.ImageServlet</servlet-class>  
4.     </servlet>  
5.       
6.     <servlet-mapping>  
7.         <servlet-name>Image Servlet</servlet-name>  
8.         <url-pattern>*.showimg</url-pattern>  
9.     </servlet-mapping>  

<servlet>        <servlet-name>Image Servlet</servlet-name>        <servlet-class>cn.edu.sudt.zhidui.servlet.ImageServlet</servlet-class>    </servlet>    <servlet-mapping>        <servlet-name>Image Servlet</servlet-name>        <url-pattern>*.showimg</url-pattern>    </servlet-mapping>

这时使用<img>标签就能成功地将图片显示到页面中了．

[html] view plain copy

print?

1. <img src=“asd.showimg?memberId=#{memberHome.instance.id}” />  

<img src="asd.showimg?memberId=#{memberHome.instance.id}" />