Struts2 图片上传、缩放、剪切处理 第一节

1、技术目标：

 

• 为项目"影片管理"加入图片上传功能
• 使用struts2完成图片上传
• 将上传的图片重命名并保存到web服务器

 2、MySQL数据表film(影片表)加入列imgurl(影片海报图片链接)，执行如下SQL：

  Sql代码  

1. ALTER TABLE film ADD imgurl VARCHAR(200) DEFAULT NULL;  

 

 3、POJO类Film加入属性imgurl，代码如下：

 BaseDomain为所有POJO类的基类，

 Java代码  

1. package com.xxx.pojo;  
2.   
3. public class BaseDomain {  
4.     /** 
5.      * id 
6.      */  
7.     private Long id;  
8.   
9.     public Long getId() {  
10.         return id;  
11.     }  
12.       
13.     public void setId(Long id) {  
14.         this.id = id;  
15.     }@Override  
16.     public String toString() {  
17.         return "BaseDomain [id=" + id + "]";  
18.     }  
19.   
20.     @Override  
21.     public int hashCode() {  
22.         final int prime = 31;  
23.         int result = 1;  
24.         result = prime * result + ((id == null) ? 0 : id.hashCode());  
25.         return result;  
26.     }  
27.   
28.     @Override  
29.     public boolean equals(Object obj) {  
30.         if (this == obj)  
31.             return true;  
32.         if (obj == null)  
33.             return false;  
34.         if (getClass() != obj.getClass())  
35.             return false;  
36.         BaseDomain other = (BaseDomain) obj;  
37.         if (id == null) {  
38.             if (other.id != null)  
39.                 return false;  
40.         } else if (!id.equals(other.id))  
41.             return false;  
42.         return true;  
43.     }  
44. }  

 

 Film(影片类)，

  Java代码  

1. package com.xxx.pojo;  
2.   
3. public class Film extends BaseDomain {  
4.       
5.     // Fields  
6.     private String fname;//影片名称  
7.       
8.     private String imgurl;//海报图片url  
9.       
10.     // Constructors  
11.     /** default constructor */  
12.     public Film() {  
13.     }  
14.       
15.     // Property accessors  
16.     public String getFname() {  
17.         return this.fname;  
18.     }  
19.       
20.     public void setFname(String fname) {  
21.         this.fname = fname;  
22.     }  
23.   
24.     public String getImgurl() {  
25.         return imgurl;  
26.     }  
27.   
28.     public void setImgurl(String imgurl) {  
29.         this.imgurl = imgurl;  
30.     }  
31.   
32. }  

 

 4、FilmMapper.xml中，添加影片与修改影片的SQL语句中加入对imgurl字段的操作，如下：

  Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"   
3. "http://mybatis.org/dtd/mybatis-3-mapper.dtd">  
4.   
5. <mapper namespace="com.xxx.dao.temp.FilmMapper">  
6.       
7.     <!-- 查询所有电影信息，对应FilmMapper接口中的getAllFilm方法 -->  
8.     <select id="getAllFilm" resultType="Film">  
9.         select * from film  
10.     </select>  
11.       
12.     <!-- 按电影编号查询电影信息，对应FilmMapper接口中的getFilmById方法 -->  
13.     <select id="getFilmById" parameterType="int" resultType="Film">  
14.     select * from film where id=#{id}  
15.     </select>  
16.       
17.     <!-- 按要求排序 -->  
18.     <select id="getAllFilmOrder" parameterType="map" resultType="Film">  
19.     select * from film where 11 = 1   
20.     <if test="orderKey != null">  
21.     order by ${orderKey}   
22.     </if>  
23.     </select>  
24.       
25.     <!-- 添加影片 -->  
26.     <insert id="insertFilm" parameterType="Film" keyProperty="id"  
27.         useGeneratedKeys="true">  
28.         insert into film (fname, imgurl) values (#{fname}, #{imgurl});  
29.     </insert>  
30.       
31.     <!-- 修改影片 -->  
32.     <update id="updateFilm" parameterType="Film">  
33.         update film  
34.         <trim prefix="set" suffixOverrides=",">  
35.             <if test="fname != null">  
36.                 fname = #{fname},  
37.             </if>  
38.             <if test='imgurl != null and imgurl != ""'>  
39.                 imgurl = #{imgurl}  
40.             </if>  
41.         </trim>  
42.         where id = #{id}  
43.     </update>  
44.       
45.     <!-- 删除影片 -->  
46.     <delete id="deleteFilm" parameterType="int">  
47.         delete from film where id = #{id}  
48.     </delete>  
49.       
50. </mapper>  

 

5、在WebRoot(页面路径)下创建文件夹images，放一张提示图片error.gif(示例项目中提供)，在影片无海报图片时显示

 

6、在添加、修改影片页面(insertFilm.jsp、updateFilm.jsp)中

加入文件选择对话框并设置表单属性enctype，如下：

 添加影片页面效果图：

 

 insertFilm.jsp代码，

 Html代码  

1. <%@ page language="java" contentType="text/html; charset=utf-8"  
2. pageEncoding="utf-8" %>  
3. <%@taglib uri="/struts-tags" prefix="s" %>  
4. <%  
5. String path = request.getContextPath();  
6. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
7. %>  
8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
9. <html>  
10.   <head>  
11.     <title>添加影片</title>  
12.   </head>  
13.   <body>  
14.     <%--  
15.         enctype属性：规定在发送到服务器之前应该如何对表单数据进行编码  
16.         multipart/form-data值：不对字符编码，在使用包含文件上传控件的表单时必须使用该值  
17.      --%>  
18.     <s:form action="/film/insertFilm" method="post" enctype="multipart/form-data">  
19.         影片名称：<s:textfield name="fname" value="" /><br />  
20.         <%--文件选择框 --%>  
21.         影片海报：<s:file id="imgPhoto" name="imgPhoto"/><br />  
22.         <s:submit value=" 添加 "></s:submit>  
23.     </s:form>  
24.   </body>  
25. </html>  

  修改页面效果图：

 

updateFilm.jsp代码，

  Html代码  

1. <%@ page language="java" contentType="text/html; charset=utf-8"  
2. pageEncoding="utf-8" %>  
3. <%@taglib uri="/struts-tags" prefix="s" %>  
4. <%  
5. String path = request.getContextPath();  
6. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
7. %>  
8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
9. <html>  
10.   <head>  
11.     <title>修改影片</title>  
12.   </head>  
13.   <body>  
14.     <s:form action="/film/updateFilm" method="post" enctype="multipart/form-data">  
15.         <s:hidden name="id" />  
16.         影片名称：<s:textfield name="fname" /><br />  
17.         <%-- 处理原有图片 --%>  
18.         <s:if test='imgurl != null and imgurl != ""'>  
19.             <%-- 保存原有图片的信息在修改时提交 --%>  
20.         <s:hidden name="imgurl"></s:hidden>  
21.         <%-- 显示原有图片，onerror属性：在打不开图片时显示提示图片 --%>  
22.         <img src="<s:property value="imgurl" />" width="92" height="130"   
23.         onerror="javascript:this.src='<%=basePath %>/images/error.gif'" /><br />  
24.     </s:if>  
25.         <%--文件选择框 --%>  
26.         影片海报：<s:file id="imgPhoto" name="imgPhoto"/><br />  
27.         <s:submit value=" 修改 "></s:submit>  
28.     </s:form>  
29.   </body>  
30. </html>  

  

7、struts.xml中添加、修改影片Action的配置中加入的Struts2的文件处理拦截器，配置如下：

 Xml代码  

1. <?xml version="1.0" encoding="UTF-8" ?>  
2. <!DOCTYPE struts PUBLIC  
3.     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
4.     "http://struts.apache.org/dtds/struts-2.0.dtd">  
5.   
6. <struts>  
7.   
8.     <constant name="struts.enable.DynamicMethodInvocation" value="true" />  
9.     <constant name="struts.devMode" value="true" />  
10.     <constant name="struts.i18n.encoding" value="UTF-8" />  
11.     <constant name="struts.objectFactory" value="spring" />  
12.     <constant name="struts.objectFactory.spring.autoWire" value="type" />  
13.     <constant name="struts.ui.theme" value="simple"></constant>  
14.       
15.     <package name="film" namespace="/film" extends="struts-default">  
16.           
17.         <!-- 获取所有影片 -->  
18.         <action name="findFilm" class="filmAction" method="findFilm">  
19.             <result name="success">/manager/films.jsp</result>  
20.         </action>  
21.         <!-- 添加影片 -->  
22.         <action name="insertFilm" class="filmAction" method="insertFilm">  
23.             <!-- 默认拦截器 -->  
24.             <interceptor-ref name="defaultStack" />  
25.             <!-- 文件上传拦截器 -->  
26.             <interceptor-ref name="fileUploadStack">  
27.                 <!-- 配置允许上传的文件大小，单位字节(默认2M) -->  
28.                     <param name="maximumSize">10000000</param>  
29.                 <param name="allowedTypes">  
30.                 image/bmp,image/png,image/gif,image/jpeg  
31.                             </param>  
32.             </interceptor-ref>  
33.             <result name="success" type="redirectAction">findFilm</result>  
34.         </action>  
35.         <!-- 获取影片详情 -->  
36.         <action name="detailFilm" class="filmAction" method="detailFilm">  
37.             <result name="success">/manager/updateFilm.jsp</result>  
38.         </action>  
39.         <!-- 修改影片 -->  
40.         <action name="updateFilm" class="filmAction" method="updateFilm">  
41.             <!-- 默认拦截器 -->  
42.             <interceptor-ref name="defaultStack" />  
43.             <!-- 文件上传拦截器 -->  
44.             <interceptor-ref name="fileUploadStack">  
45.                 <!-- 配置允许上传的文件大小，单位字节(默认2M) -->  
46.                         <param name="maximumSize">10000000</param>  
47.                 <param name="allowedTypes">  
48.                     image/bmp,image/png,image/gif,image/jpeg  
49.                         </param>  
50.             </interceptor-ref>  
51.             <result name="success" type="redirectAction">findFilm</result>  
52.         </action>  
53.         <!-- 删除影片 -->  
54.         <action name="deleteFilm" class="filmAction" method="deleteFilm">  
55.             <result name="success" type="redirectAction">findFilm</result>  
56.         </action>  
57.           
58.     </package>  
59.       
60. </struts>  

  

fileUploadStack拦截器的参数allowedTypes为限制上传文件的类型，文件类型与限制方式的对应关系如下：

文件类型  限制方式

==================================

.a       application/octet-stream

.ai      application/postscript    

.aif     audio/x-aiff    

.aifc    audio/x-aiff    

.aiff    audio/x-aiff    

.au     audio/basic    

.avi    video/x-msvideo    

.bat    text/plain    

.bcpio application/x-bcpio    

.bin    application/octet-stream    

.bmp  image/x-ms-bmp    

.c       text/plain   

.cdf   application/x-cdf    

.cdf    application/x-netcdf    

.cpio   application/x-cpio    

.csh    application/x-csh    

.css     text/css    

.dll      application/octet-stream    

.doc     application/msword    

.dot     application/msword    

.dvi     application/x-dvi    

.eml    message/rfc822    

.eps     application/postscript    

.etx     text/x-setext    

.exe    application/octet-stream    

.gif     image/gif    

.gtar    application/x-gtar    

.h       text/plain    

.hdf     application/x-hdf    

.htm     text/html    

.html    text/html    

.ief     image/ief    

.jpe     image/jpeg    

.jpeg    image/jpeg    

.jpg     image/jpeg    

.js      application/x-javascript    

.ksh     text/plain    

.latex  application/x-latex    

.m1v     video/mpeg    

.man     application/x-troff-man    

.me      application/x-troff-me    

.mht     message/rfc822    

.mhtml  message/rfc822    

.mif     application/x-mif    

.mov     video/quicktime    

.movie  video/x-sgi-movie    

.mp2     audio/mpeg    

.mp3     audio/mpeg    

.mpa     video/mpeg    

.mpe     video/mpeg    

.mpeg    video/mpeg    

.mpg     video/mpeg    

.ms      application/x-troff-ms    

.nc      application/x-netcdf    

.nws     message/rfc822    

.o       application/octet-stream    

.obj     application/octet-stream    

.oda     application/oda    

.p12     application/x-pkcs12    

.p7c     application/pkcs7-mime    

.pbm     image/x-portable-bitmap    

.pdf     application/pdf    

.pfx     application/x-pkcs12    

.pgm     image/x-portable-graymap    

.pl      text/plain    

.png     image/png    

.pnm     image/x-portable-anymap    

.pot     application/vnd.ms-powerpoint    

.ppa     application/vnd.ms-powerpoint    

.ppm    image/x-portable-pixmap    

.pps     application/vnd.ms-powerpoint    

.ppt     application/vnd.ms-powerpoint    

.ps      application/postscript    

.pwz     application/vnd.ms-powerpoint    

.py      text/x-python    

.pyc     application/x-python-code    

.pyo     application/x-python-code    

.qt      video/quicktime    

.ra      audio/x-pn-realaudio    

.ram     application/x-pn-realaudio    

.ras     image/x-cmu-raster    

.rdf     application/xml    

.rgb     image/x-rgb    

.roff    application/x-troff    

.rtx     text/richtext    

.sgm     text/x-sgml    

.sgml    text/x-sgml    

.sh      application/x-sh    

.shar    application/x-shar    

.snd     audio/basic    

.so      application/octet-stream    

.src     application/x-wais-source    

.sv4cpio application/x-sv4cpio    

.sv4crc  application/x-sv4crc    

.swf     application/x-shockwave-flash    

.t       application/x-troff    

.tar     application/x-tar    

.tcl     application/x-tcl    

   

.tex     application/x-tex    

.texi    application/x-texinfo    

.texinfo application/x-texinfo    

.tif     image/tiff    

.tiff    image/tiff    

.tr      application/x-troff    

.tsv     text/tab-separated-values    

.txt     text/plain    

.ustar  application/x-ustar    

.vcf     text/x-vcard    

.wav     audio/x-wav    

.wiz     application/msword    

.wsdl    application/xml    

.xbm     image/x-xbitmap    

.xlb     application/vnd.ms-excel    

.xls     application/excel    

.xls     application/vnd.ms-excel    

.xml     text/xml    

.xpdl    application/xml    

.xpm     image/x-xpixmap    

.xsl     application/xml    

.xwd     image/x-xwindowdump    

.zip     application/zip

 

 8、在FilmAction中加入一组与文件上传相关的属性，加入uploadFile方法，在添加、修改操作前调用uploadFile方法处理图片，代码如下：

  Java代码  

1. package com.xxx.web.struts.action;  
2.   
3. import java.io.File;  
4. import java.io.IOException;  
5. import java.text.SimpleDateFormat;  
6. import java.util.Date;  
7. import java.util.List;  
8. import java.util.Random;  
9. import org.apache.commons.io.FileUtils;  
10. import org.apache.struts2.ServletActionContext;  
11. import org.springframework.beans.factory.annotation.Autowired;  
12. import com.opensymphony.xwork2.ActionSupport;  
13. import com.opensymphony.xwork2.ModelDriven;  
14. import com.xxx.pojo.Film;  
15. import com.xxx.service.FilmService;  
16.   
17. @SuppressWarnings("serial")  
18. public class FilmAction extends ActionSupport implements ModelDriven<Film> {  
19.   
20.     //业务逻辑对象  
21.     @Autowired  
22.     private FilmService filmService;  
23.       
24.     //封装查询结果  
25.     private List<Film> filmList;  
26.       
27.     //封装页面提交的表单数据  
28.     private Film film = new Film();  
29.       
30.     //图片服务器url  
31.     public static final String IMAGE_SERVER_URL = "http://localhost:8080/mysit";  
32.       
33.     /* 文件上传相关属性 */  
34.     private File imgPhoto;// 对应页面的<s:file id="imgPhoto" name="imgPhoto"/>  
35.     private String contentType;// 上传文件的MIME类型，由struts设置  
36.     private String fileName;// 上传文件的文件名(该文件名不包括文件的路径)，由struts设置  
37.       
38.     /* 文件上传相关属性的getter/setter */  
39.     public File getImgPhoto() {  
40.         return imgPhoto;  
41.     }  
42.     public void setImgPhoto(File imgPhoto) {  
43.         this.imgPhoto = imgPhoto;  
44.     }  
45.       
46.     /* 
47.      *  注意：contentType与fileName的getter/setter， 
48.      *      名称前需要加ImgPhoto，这样设置struts才能识别 
49.      */  
50.     public String getImgPhotoContentType() {  
51.         return contentType;  
52.     }  
53.     public void setImgPhotoContentType(String contentType) {  
54.         this.contentType = contentType;  
55.     }  
56.   
57.     public String getImgPhotoFileName() {  
58.         return fileName;  
59.     }  
60.     public void setImgPhotoFileName(String fileName) {  
61.         this.fileName = fileName;  
62.     }  
63.       
64.     /** 
65.      * 处理上传的文件 
66.      */  
67.     private void uploadFile(){  
68.           
69.         //判断文件是否上传  
70.         if (this.imgPhoto == null || this.fileName == null   
71.                 || this.fileName.equals("")) {//没有上传文件  
72.             return;  
73.         }  
74.           
75.         /*生成一个随机文件名*/  
76.           
77.         // 生成随机数  
78.         Random rand = new Random();  
79.         int random = rand.nextInt();  
80.         random = random > 0 ? random : (-1) * random;// 随机负数转为正数  
81.           
82.         // 获取当前时间  
83.         Date date = new Date();  
84.         SimpleDateFormat sdf = new SimpleDateFormat(  
85.         "yyyyMMddHHmmss");  
86.           
87.         //将当前时间转换为yyyyMMddHHmmss格式  
88.         String currentTime = sdf.format(date);  
89.           
90.         //设置文件名(新文件名 = 当前时间 + 随机数 + 上传文件的后缀名)  
91.         String imageFileName = currentTime + random +   
92.         fileName.substring(fileName.lastIndexOf("."));  
93.           
94.         /*设置上传文件的保存路径*/  
95.           
96.         //获取web服务器工作路径  
97.         String realPath =   
98.             ServletActionContext.getServletContext().getRealPath("/images");  
99.           
100.         //文件的存放位置 = web服务器中项目的images路径 + 新文件名  
101.         File destinationFile = new File(realPath + "/" + imageFileName);   
102.           
103.         //将上传文件拷贝到web服务器  
104.         try {  
105.             FileUtils.copyFile(this.imgPhoto, destinationFile);  
106.         } catch (IOException e) {  
107.             e.printStackTrace();  
108.         }  
109.           
110.         /* 
111.         将上传图片的完整url设置给film对象，在后续的添加操作中保存到数据库， 
112.         设置完整url的目的是便于以后使用单独的图片服务器保存图片，前台页面 
113.         可直接读取这个url呈现图片，图片服务器的url可设置到配置文件中，这里 
114.         用一个静态变量来保存 
115.         */  
116.         this.film.setImgurl(IMAGE_SERVER_URL + "/images/" + imageFileName);  
117.           
118.     }  
119.       
120.     /** 
121.      * 获取所有的电影 
122.      * @return 
123.      * @throws Exception 
124.      */  
125.     public String findFilm() throws Exception {  
126.           
127.         this.filmList = this.filmService.getAllFilm();  
128.           
129.         return SUCCESS;  
130.     }  
131.   
132.     /** 
133.      * 根据影片ID获取影片信息 
134.      * @return 
135.      * @throws Exception 
136.      */  
137.     public String detailFilm() throws Exception {  
138.         int id = film.getId().intValue();  
139.         Film film = this.filmService.getFilmById(id);  
140.         this.film.setFname(film.getFname());  
141.         this.film.setImgurl(film.getImgurl());  
142.         return SUCCESS;  
143.     }  
144.       
145.     /** 
146.      * 添加影片 
147.      * @return 
148.      * @throws Exception 
149.      */  
150.     public String insertFilm() throws Exception {  
151.           
152.         //处理上传图片  
153.         this.uploadFile();  
154.           
155.         this.filmService.insertFilm(film);  
156.         return SUCCESS;  
157.     }  
158.       
159.     /** 
160.      * 修改影片 
161.      * @return 
162.      * @throws Exception 
163.      */  
164.     public String updateFilm() throws Exception {  
165.           
166.         //处理上传图片  
167.         this.uploadFile();  
168.           
169.         this.filmService.updateFilm(film);  
170.         return SUCCESS;  
171.     }  
172.       
173.     /** 
174.      * 删除影片 
175.      * @return 
176.      * @throws Exception 
177.      */  
178.     public String deleteFilm() throws Exception {  
179.         int id = film.getId().intValue();  
180.         this.filmService.deleteFilm(id);  
181.         return SUCCESS;  
182.     }  
183.       
184.     public Film getModel() {  
185.         return film;  
186.     }  
187.   
188.     public List<Film> getFilmList() {  
189.         return filmList;  
190.     }  
191.   
192.     public void setFilmList(List<Film> filmList) {  
193.         this.filmList = filmList;  
194.     }  
195.   
196. }  

 

 9、在films.jsp页面的影片列表中呈现出图片，如下：

 影片列表页面效果图：

 

 

 films.jsp代码：

 Html代码  

1. <%@ page language="java" contentType="text/html; charset=utf-8"  
2. pageEncoding="utf-8" %>  
3. <%@taglib uri="/struts-tags" prefix="s" %>  
4. <%  
5. String path = request.getContextPath();  
6. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";  
7. %>  
8. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
9. <html>  
10.   <head>  
11.     <title>信息操作</title>  
12.   </head>  
13.   <body>  
14.     <s:form action="/film/findFilm" method="post">  
15.         <s:submit value=" 获取所有影片信息 "></s:submit>  
16.     </s:form>  
17.     <a href="<%=basePath %>manager/insertFilm.jsp">添加影片信息</a><br />  
18.     <s:if test="filmList != null">  
19.         <table border="1" width="40%">  
20.             <tr>  
21.                 <th>序号</th><th>海报</th><th>影片名</th><th>操作</th>  
22.             </tr>   
23.             <%-- 遍历影片信息 --%>  
24.             <s:iterator var="film" value="filmList" status="st">  
25.                 <tr>  
26.                     <td><s:property value="#st.index+1" /></td>  
27.                     <td>  
28.                         <%-- 显示海报图片，onerror属性：在打不开图片时显示提示图片 --%>  
29.                     <img src="<s:property value="imgurl" />" width="92" height="130"   
30.                     onerror="javascript:this.src='<%=basePath %>/images/error.gif'" /><br />  
31.                     </td>  
32.                     <td><s:property value="fname" /></td>  
33.                     <td>  
34.                         <s:url id="detailUrl" value="/film/detailFilm">  
35.                                         <s:param name="id" value="%{id}"/>  
36.                                     </s:url>  
37.                         <s:a href="%{detailUrl}">[修改]</s:a>&nbsp;  
38.   
39.                         <s:url id="deleteUrl" value="/film/deleteFilm">  
40.                                         <s:param name="id" value="%{id}"/>  
41.                                     </s:url>  
42.                         <s:a href="%{deleteUrl}">[删除]</s:a>  
43.                     </td>  
44.                 </tr>  
45.             </s:iterator>  
46.         </table>  
47.     </s:if>  
48.   </body>  
49. </html>