Struts2将图片输出到页面
在做CRUD的过程中，添加页面是个表单，表单里面有一项是上传头像文件。这样表单提交后，头像文件上传了。
但这个文件存的地址是本地硬盘的一个文件夹。在编辑页面要做这个头像的回显的话，就需要我们去本地文件读到这张图片，
然后将这张图片输出到页面。
笔者很久都没写过怎么把图片输出到页面了，在网上看了点资料，感觉不够清晰。于是决定自己做下笔记，方便后续查阅。
一、思路
既然是将图片回显，那么页面上图片的src属性肯定就是一个http请求，后台处理这个请求是输出一张图片到浏览器
（1） 编辑页面的使用 <img /> 标签，然后src属性值为一个http请求，这个请求带了参数
（2） 后台通过这个请求带的参数，去数据库中查出图片的地址
（3） 后台拿到图片地址后，用输入流和输出流的方法，把图片读进来再输出到浏览器
二、代码
（1）页面的代码
<td class="tdBg" width="200px">头像：</td>
<td>
<!-- 显示头像 -->
<img src="${basePath}nsfw/user_showHeadImg.action?user.id=${user.id}" width="100" height="100"/>
<input type="file" name="headImg" accept = "image/*"/>
</td>6
1
<td class="tdBg" width="200px">头像：</td>
2
<td>
3
<!-- 显示头像 -->
4
<img src="${basePath}nsfw/user_showHeadImg.action?user.id=${user.id}" width="100" height="100"/>
5
<input type="file" name="headImg" accept = "image/*"/>
6
</td>
（2）后台代码
这里还有个图片上传的方法没删掉，方便后续查阅
package com.tax.web.user;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.IOException;
import java.util.List;
import java.util.UUID;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.FileUtils;
import org.apache.commons.lang3.StringUtils;
import org.apache.struts2.ServletActionContext;
import org.springframework.beans.factory.annotation.Autowired;
import com.opensymphony.xwork2.ActionSupport;
import com.tax.pojo.nsfw.User;
import com.tax.service.UserService;
/**
* UserAction
* @author ZENG.XIAO.YAN
* @date 2017年7月11日 上午10:06:05
* @version v1.0
*/
public class UserAction extends ActionSupport {
private static final long serialVersionUID = 4526496105243102063L;
@Autowired
private UserService userService;
private User user;
/** 文件上传的3个属性 */
private File headImg; // 这个名字和表单的name的值一样
private String headImgFileName;
private String headImgContentType;
/** 存放图片的本地文件夹 */
private static final String USER_IMAGE_DIR = "D:/upload";
/**
* 展示用户头像 Action方法
* @return 将头像输出到页面
* @see 访问方式：tax/nsfw/user_showHeadImg.action?user.id=xxxx
*/
public String showHeadImg() {
// 这个user的id是通过前台传过来的
if(null != user && user.getId() != null) {
// 通过用户id去数据库查找出用户头像的地址
String img = userService.findById(user.getId()).getHeadImg();
if(StringUtils.isNotBlank(img)) {
// 拼接成本地地址，如：D:/upload/user/0dc14d2b81444ce1b5600a3fe43f9f30.jpg
// USER_IMAGE_DIR = D:/upload
// img 如：user/0dc14d2b81444ce1b5600a3fe43f9f30.jpg
File imgFile = new File(USER_IMAGE_DIR + "/" + img);
// 如果图片文件存在，就输出到页面
if(imgFile.exists()) {
/** 获取HttpServletResponse */
HttpServletResponse response = ServletActionContext.getResponse();
/** 设置响应的内容类型 */
response.setContentType("images/jpeg");
/** 以下3行代码用于设置禁止浏览器缓存该图片 */
response.setDateHeader("expries", -1);
response.setHeader("Cache-Control", "no-cache");
response.setHeader("Prama", "no-cache");
// 以下为IO流操作
BufferedInputStream bis = null;
BufferedOutputStream bos = null;
try {
bis = new BufferedInputStream(new FileInputStream(imgFile));
// 这个Response.getOutputStream()是用于输出到浏览器的输出流
bos = new BufferedOutputStream(response.getOutputStream());
byte[] buffer = new byte[1024];
int len = 0;
while ((len = bis.read(buffer)) != -1) {
bos.write(buffer, 0, len);
}
} catch (Exception e) {
e.printStackTrace();
} finally {
// 关流
if (bis != null) {
try {
bis.close();
} catch (IOException e) {
e.printStackTrace();
}
}
if (bos != null) {
try {
bos.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}
}
}
}
// 这里没有返回视图，直接返回NONE
return NONE;
}
/**
* 专门用于文件上传的方法，返回文件路径
* @return 文件路径
*/
private String uploadFile() {
try {
if (null != headImg) {
// 获取存放文件夹路径
// USER_IMAGE_DIR = D:/upload
String prePath = USER_IMAGE_DIR.concat("/user");
if(!new File(prePath).exists()) {
new File(prePath).mkdirs();
}
// 新的文件名
String fileName = UUID.randomUUID().toString().replaceAll("-", "")
.concat(headImgFileName.substring(headImgFileName.lastIndexOf(".")));
// 用common-io.jar的工具copy文件
FileUtils.copyFile(headImg, new File(prePath,fileName));
return "user/".concat(fileName);
}
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
/** setter and getter method */
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
public File getHeadImg() {
return headImg;
}
public void setHeadImg(File headImg) {
this.headImg = headImg;
}
public String getHeadImgFileName() {
return headImgFileName;
}
public void setHeadImgFileName(String headImgFileName) {
this.headImgFileName = headImgFileName;
}
public String getHeadImgContentType() {
return headImgContentType;
}
public void setHeadImgContentType(String headImgContentType) {
this.headImgContentType = headImgContentType;
}
}x
1
package com.tax.web.user;
2
3
import java.io.BufferedInputStream;
4
import java.io.BufferedOutputStream;
5
import java.io.File;
6
import java.io.FileInputStream;
7
import java.io.IOException;
8
import java.util.List;
9
import java.util.UUID;
10
import javax.servlet.http.HttpServletResponse;
11
import org.apache.commons.io.FileUtils;
12
import org.apache.commons.lang3.StringUtils;
13
import org.apache.struts2.ServletActionContext;
14
import org.springframework.beans.factory.annotation.Autowired;
15
import com.opensymphony.xwork2.ActionSupport;
16
import com.tax.pojo.nsfw.User;
17
import com.tax.service.UserService;
18
19
/**
20
* UserAction
21
* @author ZENG.XIAO.YAN
22
* @date 2017年7月11日 上午10:06:05
23
* @version v1.0
24
*/
25
26
public class UserAction extends ActionSupport {
27
28
private static final long serialVersionUID = 4526496105243102063L;
29
@Autowired
30
private UserService userService;
31
private User user;
32
/** 文件上传的3个属性 */
33
private File headImg; // 这个名字和表单的name的值一样
34
private String headImgFileName;
35
private String headImgContentType;
36
/** 存放图片的本地文件夹 */
37
private static final String USER_IMAGE_DIR = "D:/upload";
38
39
40
41
/**
42
* 展示用户头像 Action方法
43
* @return 将头像输出到页面
44
* @see 访问方式：tax/nsfw/user_showHeadImg.action?user.id=xxxx
45
*/
46
public String showHeadImg() {
47
// 这个user的id是通过前台传过来的
48
if(null != user && user.getId() != null) {
49
// 通过用户id去数据库查找出用户头像的地址
50
String img = userService.findById(user.getId()).getHeadImg();
51
if(StringUtils.isNotBlank(img)) {
52
// 拼接成本地地址，如：D:/upload/user/0dc14d2b81444ce1b5600a3fe43f9f30.jpg
53
// USER_IMAGE_DIR = D:/upload
54
// img 如：user/0dc14d2b81444ce1b5600a3fe43f9f30.jpg
55
File imgFile = new File(USER_IMAGE_DIR + "/" + img);
56
// 如果图片文件存在，就输出到页面
57
if(imgFile.exists()) {
58
/** 获取HttpServletResponse */
59
HttpServletResponse response = ServletActionContext.getResponse();
60
/** 设置响应的内容类型 */
61
response.setContentType("images/jpeg");
62
/** 以下3行代码用于设置禁止浏览器缓存该图片 */
63
response.setDateHeader("expries", -1);
64
response.setHeader("Cache-Control", "no-cache");
65
response.setHeader("Prama", "no-cache");
66
// 以下为IO流操作
67
BufferedInputStream bis = null;
68
BufferedOutputStream bos = null;
69
try {
70
bis = new BufferedInputStream(new FileInputStream(imgFile));
71
// 这个Response.getOutputStream()是用于输出到浏览器的输出流
72
bos = new BufferedOutputStream(response.getOutputStream());
73
byte[] buffer = new byte[1024];
74
int len = 0;
75
while ((len = bis.read(buffer)) != -1) {
76
bos.write(buffer, 0, len);
77
}
78
} catch (Exception e) {
79
e.printStackTrace();
80
} finally {
81
// 关流
82
if (bis != null) {
83
try {
84
bis.close();
85
} catch (IOException e) {
86
e.printStackTrace();
87
}
88
}
89
if (bos != null) {
90
try {
91
bos.close();
92
} catch (IOException e) {
93
e.printStackTrace();
94
}
95
}
96
}
97
}
98
}
99
}
100
// 这里没有返回视图，直接返回NONE
101
return NONE;
102
}
103
104
105
106
107
108
/**
109
* 专门用于文件上传的方法，返回文件路径
110
* @return 文件路径
111
*/
112
private String uploadFile() {
113
try {
114
if (null != headImg) {
115
// 获取存放文件夹路径
116
// USER_IMAGE_DIR = D:/upload
117
String prePath = USER_IMAGE_DIR.concat("/user");
118
if(!new File(prePath).exists()) {
119
new File(prePath).mkdirs();
120
}
121
// 新的文件名
122
String fileName = UUID.randomUUID().toString().replaceAll("-", "")
123
.concat(headImgFileName.substring(headImgFileName.lastIndexOf(".")));
124
// 用common-io.jar的工具copy文件
125
FileUtils.copyFile(headImg, new File(prePath,fileName));
126
return "user/".concat(fileName);
127
}
128
} catch (IOException e) {
129
e.printStackTrace();
130
}
131
return null;
132
}
133
134
135
/** setter and getter method */
136
137
public User getUser() {
138
return user;
139
}
140
141
public void setUser(User user) {
142
this.user = user;
143
}
144
145
public File getHeadImg() {
146
return headImg;
147
}
148
149
public void setHeadImg(File headImg) {
150
this.headImg = headImg;
151
}
152
153
public String getHeadImgFileName() {
154
return headImgFileName;
155
}
156
157
public void setHeadImgFileName(String headImgFileName) {
158
this.headImgFileName = headImgFileName;
159
}
160
161
public String getHeadImgContentType() {
162
return headImgContentType;
163
}
164
165
public void setHeadImgContentType(String headImgContentType) {
166
this.headImgContentType = headImgContentType;
167
}
168
169
}
Struts2将图片输出到页面的更多相关文章
- ASP.NET 画图与图像处理－如何直接输出到页面
有时候我们生成的图片并不需要保存到磁盘中,而是直接输出到页面,比如验证码.实时报表等,如何做呢?请参考如下: protected void Page_Load(object sender, E ...
- 使用IExport进行图片输出出现File creation error
使用IExport进行图片输出(.JPG)时,出现如下异常File creation error. 在ESRI.ArcGIS.Output.ExportJPEGClass.FinishExport ...
- js引入php 用来加载静态页面 输出到页面中
HTML页面中加入代码 <script type="text/javascript" src="http://www.域名.com/js.php?id=tjyd&q ...
- 动态jsp页面转PDF输出到页面
最近工作中遇到不少问题.总结一下.这段代码主要功能是将一个生成JSP页面转发成PDF输出到页面 需要利用ITEXT String html = ServletUtils.forward(request ...
- JavaScript-2.2 document.write 输出到页面的内容
<html> <head> <meta http-equiv="content-type" content="text/html;chars ...
- Struts2如何传值到jsp页面
Struts2如何传值到jsp页面 不是action传值到jsp页面,而是jsp页面获取action中的属性值,或者范围(如request,session,application等)里的值.所以,有两 ...
- 【PDF单页转化为图片输出 注意：英文或图片类的PDF可转化，中文抛异常】
public static void main(String[] args) throws IOException { /** * PDF单页转化为图片输出 注意:英文或图片类的PDF可转化,中文抛异 ...
- jstl-按照html的形式输出至页面
一.按照html的形式输出至页面 <c:out value="${xxx}" default="默认值" escapeXml="false&qu ...
- webpack2.0 css文件引入错误解决及图片输出在根目录配置问题
webpack引入css文件,main.js内容如下 import Vue from 'vue'; import App from './App.vue'; import Mint from 'min ...
随机推荐
- Python 基于Python实现Ftp文件上传,下载
基于Python实现Ftp文件上传,下载 by:授客 QQ:1033553122 测试环境: Ftp客户端:Windows平台 Ftp服务器:Linux平台 Python版本:Python 2.7 ...
- Oracle 修改oracle数据库名
Oracle 修改oracle数据库名 by:授客 QQ:1033553122 1.确保你有个可用于数据库恢复的,完整的数据库备份 2.确保数据库处于mount,非open状态,并且在加载前先以imm ...
- Spring Boot系列学习文章(二) -- 配置多数据源
前言: 在上一章中,我们已经搭建好项目,现在来讲一下如何配置数据源. 由于在有的项目中,用的数据源可能会涉及多个,且是不同类型的,我们接下来就讲解多数据源的配置. 情景描述: 现有项目需要访问不同的数 ...
- [Android] (在ScrollView里嵌套view)重叠view里面的onTouchEvent的调用方法
在我前面的自定义裁剪窗口的代码中,我把裁剪的view放在了大的scrollview里,这样就出现了程序只能触发scrollview,无法操作我的裁剪窗口.所以我加了那篇博客下面最后两段代码.其实我遇到 ...
- Android 开源库和项目 3
Android 开源库和项目 Android 开源库和项目 2 1.Matisse Android 图片选择器 -- 知乎开源 github 地址:https://github.com/zhihu/M ...
- springboot 1.3.5升级1.5.9后 默认使用tomcat 8.5版本 get请求报400 异常信息为 The valid characters are defined in RFC 7230 and RFC 3986
1.springboot 1.3.5升级1.5.9后 默认使用tomcat 8.5版本而之前用的是tomcat7 get请求报400 异常信息为 The valid characters are ...
- oracle 忘记了scott用户的密码，该怎么修改
sqlplus / as sysdba,进入sys用户下,alter user scott identified by 123456,改成自己需要的密码
- "System.OutOfMemoryException" exception when you execute a query in SQL Server Management Studio （转自MSDN）
Symptoms When you use Microsoft SQL Server Management Studio (SSMS) to run an SQL query that returns ...
- 找回master库中被删除的系统表
接手的某个数据库实例中,master数据库中的所有系统表都被误删除掉了. 最直接影响就是一旦涉及到要查询这些系统表,就会出现错误. 例如,右键点击某个数据,查看属性时会出现如下图所示错误: 那么怎么找 ...
- PHP学习第一天
PHP语句是以分号结尾的 单行注释: // C++风格的单行注释 # shell 风格的单行注释 跟python差不多 多行注释: /*......*/ c++风格的多行注释 常量定义: ...