Jsp+Servlet 处理图片数据库显示
最近在做一个小demo，类似个性头像上传至后台数据库，采用base64存储，然后点击详情，显示上传的个性头像。再此处做个记录，当然也借鉴了一些大佬。 Thanks♪(･ω･)ﾉ，如果对小伙伴们有帮助，麻烦点个赞好不，废话不多说进入正题。
1、点击修改 跳转修改页面 点击明细 跳转明细页面 当前登录账号用户名为 1
2、修改页面 上传头像 点击修改返回 分页面
3、明细页面 展示头像
4、新鲜代码出炉了 modify.jsp
实现文件上传的表单标签必须加上enctype="multipart/form-data"这个属性，但是加上这个属性后，在servlet中就无法使用request.getParameter,because 获取到的参数为null
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
window.location.href="${pageContext.request.contextPath}/userservlet?method=page";
});
});
</script>
</head>
<body>
<form action="${pageContext.request.contextPath}/pictureservlet" method="post" enctype="multipart/form-data">
<table border="1">
<tr><td>编号:</td><td><input name="id" value="${profile.id}"/></td></tr>
<tr><td>姓名:</td><td><input name="name" value="${profile.name}"></td></tr>
<tr><td>生日:</td><td><input name="birthday" value="${profile.birthday}"></td></tr>
<tr><td>性别:</td><td><input name="gender" value="${profile.gender}"></td></tr>
<tr><td>职业:</td><td><input name="career" value="${profile.career}"></td></tr>
<tr><td>住所:</td><td><input name="address" value="${profile.address}"></td></tr>
<tr><td>电话:</td><td><input name="mobile" value="${profile.mobile}"></td></tr>
<tr><td>头像</td><td><input type="file" name="picture" value="选择文件"/></td></tr>
</table>
<input type="submit" value="修改"/>
<input type="button" id="btn1" value="返回"/>
</form>
</body>
</html>
5、新鲜代码出炉了 pictureservlet
@WebServlet(name = "PictureServlet",value="/pictureservlet")
public class PictureServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
UserService service=new UserServiceImpl();
Profile profile = new Profile();
DiskFileItemFactory factory=new DiskFileItemFactory();
ServletFileUpload upload=new ServletFileUpload(factory);
if(!ServletFileUpload.isMultipartContent(request)) {
//传统方式获取表单
return;
}
try {
List<FileItem> list=upload.parseRequest(request);
if(list!=null) {
for(FileItem item:list) {
//如果fileitem中封装的是普通输入项的数据
if(item.isFormField()) {
String fieldname=item.getFieldName();
String fieldvalue=item.getString("utf-8");
//普通文本
// System.out.println(fieldname+"...."+fieldvalue);
//封装成对象
if(fieldname.equals("id")){
profile.setId(Integer.parseInt(fieldvalue));
continue;
}
}else {
//将上传的文件存储于upload位置
//创建目录保存上传文件
//将上传的文件存放于WEB-INF目录下，不允许外界直接访问，保证上传文件的安全
String savePath=this.getServletContext().getRealPath("/WEB-INF/upload/"+profile.getId());
File file=new File(savePath);
//判断上传文件是否存在
if(!file.exists()) {
file.mkdirs();
}
//item中封装的是上传文件
File fileImg = new File(savePath+"/"+profile.getId()+".jpg");
//将FileItem转换为File
item.write(fileImg);
//在后台将数据转换，存储到数据库的过程
byte[] buf=FileTobyte.convert(fileImg);
BASE64Encoder encoder=new BASE64Encoder();
//通过base64来转化图片
String img=encoder.encode(buf);
profile.setPicture(img);
profile.setName(("hhaa"+profile.getId()));
}
}
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//保存至数据库
service.save(profile);
request.getRequestDispatcher("/userservlet?method=page").forward(request,response);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
6、新鲜代码出炉了 detail.jsp
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#btn1").click(function(){
window.location.href="${pageContext.request.contextPath}/userservlet?method=page";
});
<%--$("#img1").load("${pageContext.request.contextPath}/userservlet?method=show",{"url":"${profile.picture}"});--%>
});
</script>
</head>
<body>
<table border="1">
<tr><td>编号:</td><td>${profile.id}</td></tr>
<tr><td>姓名:</td><td>${profile.name}</td></tr>
<tr><td>生日:</td><td>${profile.birthday}</td></tr>
<tr><td>性别:</td><td>${profile.gender}</td></tr>
<tr><td>职业:</td><td>${profile.career}</td></tr>
<tr><td>住所:</td><td>${profile.address}</td></tr>
<tr><td>电话:</td><td>${profile.mobile}</td></tr>
<tr>
<td colspan="2">
<img src="${pageContext.request.contextPath}/showservlet?id=${profile.id}" style="width:100px;height:50px;"/>
</td>
</tr>
</table>
<%--<img src="${profile.picture}"/><br/>--%>
<div id="img1">
</div>
<input type="button" id="btn1" value="返回"/>
</body>
</html>
6、新鲜代码出炉了 showservlet
@WebServlet(name = "ShowServlet",value="/showservlet")
public class ShowServlet extends HttpServlet {
private UserService service=new UserServiceImpl();
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String _id = request.getParameter("id");
int id=1;
if(TextUtils.empty(_id)){
id=1;
}else{
id = Integer.parseInt(_id);
}
//注意 通过id查询，此时profile里的picture是byte[]类型
Profile profile=service.fingById(id);
byte[] byteArr = (byte[]) profile.getPicture();
String data=new String(byteArr,"utf-8");
BASE64Decoder decoder = new BASE64Decoder();
//base64解码成byte[],这样才能生成图片
byte[] bytes = decoder.decodeBuffer(data);
for(int i=0;i<bytes.length;++i){
//byte是有符号的，它表示的范围是-127~127，
// 如果要映射到无符号0~255，那么0~127不用改变，而-128~-1对应128~255
if(bytes[i] <0){
bytes[i]+=256;
}
}
//设置返回的文件属性
response.setContentType("image/jpeg");
//流操作，使得可以在jsp页面上接受图片
ServletOutputStream out=response.getOutputStream();
out.write(bytes);
out.flush();
out.close();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
}
大工搞成。。。。。。。Happy happy happy