题外话:推荐一个专注于Java开发的网站,做提升学习,价值阅读:Java之音
在很多的网站都可以实现上传头像,可以选择自己喜欢的图片做头像,从本地上传,下次登录时可以直接显示出已经上传的头像,那么这个是如何实现的呢?
下面说一下我的实现过程(只是个人实现思路,实际网站怎么实现的不太清楚)
实现的思路:
工具:MySQL,eclipse
首先,在MySQL中创建了两个表,一个t_user表,用来存放用户名,密码等个人信息,
一个t_touxiang表,用来存放上传的图片在服务器中的存放路径,以及图片名字和用户ID,
T_touxiang表中的用户ID对应了t_user中的id。
t_user表SQL:
-
DROP TABLE IF EXISTS `t_user`; -
CREATE TABLE `t_user` ( -
`id` int(10) NOT NULL AUTO_INCREMENT, -
`username` varchar(20) NOT NULL, -
`password` varchar(255) NOT NULL, -
PRIMARY KEY (`id`), -
UNIQUE KEY `username` (`username`) -
) ENGINE=InnoDB AUTO_INCREMENT=22 DEFAULT CHARSET=utf8;
T_touxiang表SQL:
-
DROP TABLE IF EXISTS `t_touxiang`; -
CREATE TABLE `t_touxiang` ( -
`id` int(10) NOT NULL AUTO_INCREMENT, -
`image_path` varchar(255) DEFAULT NULL, -
`user_id` int(11) DEFAULT NULL, -
`old_name` varchar(255) DEFAULT NULL, -
PRIMARY KEY (`id`), -
KEY `img_user` (`user_id`), -
CONSTRAINT `img_user` FOREIGN KEY (`user_id`) REFERENCES `t_user` (`id`) -
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;
首先,写一个UploadServlet.java,用来处理图片文件的上传,并将图片路径,图片名称等信息存放到t_touxiang数据表中,代码如下:
-
@WebServlet("/UploadServlet.do") -
public class UploadServlet extends HttpServlet { -
private static final long serialVersionUID = 1L; -
protected void service(HttpServletRequest request, HttpServletResponse response) -
throws ServletException, IOException { -
// 判断上传表单是否为multipart/form-data类型 -
HttpSession session = request.getSession(); -
User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话 -
// 中 -
if (ServletFileUpload.isMultipartContent(request)) { -
try { -
// 1. 创建DiskFileItemFactory对象,设置缓冲区大小和临时文件目录 -
DiskFileItemFactory factory = new DiskFileItemFactory(); -
// System.out.println(System.getProperty("java.io.tmpdir"));//默认临时文件夹 -
// 2. 创建ServletFileUpload对象,并设置上传文件的大小限制。 -
ServletFileUpload sfu = new ServletFileUpload(factory); -
sfu.setSizeMax(10 * 1024 * 1024);// 以byte为单位 不能超过10M 1024byte = -
// 1kb 1024kb=1M 1024M = 1G -
sfu.setHeaderEncoding("utf-8"); -
// 3. -
// 调用ServletFileUpload.parseRequest方法解析request对象,得到一个保存了所有上传内容的List对象。 -
@SuppressWarnings("unchecked") -
List<FileItem> fileItemList = sfu.parseRequest(request); -
Iterator<FileItem> fileItems = fileItemList.iterator(); -
// 4. 遍历list,每迭代一个FileItem对象,调用其isFormField方法判断是否是上传文件 -
while (fileItems.hasNext()) { -
FileItem fileItem = fileItems.next(); -
// 普通表单元素 -
if (fileItem.isFormField()) { -
String name = fileItem.getFieldName();// name属性值 -
String value = fileItem.getString("utf-8");// name对应的value值 -
System.out.println(name + " = " + value); -
} -
// <input type="file">的上传文件的元素 -
else { -
String fileName = fileItem.getName();// 文件名称 -
System.out.println("原文件名:" + fileName);// Koala.jpg -
String suffix = fileName.substring(fileName.lastIndexOf('.')); -
System.out.println("扩展名:" + suffix);// .jpg -
// 新文件名(唯一) -
String newFileName = new Date().getTime() + suffix; -
System.out.println("新文件名:" + newFileName);// image\1478509873038.jpg -
// 5. 调用FileItem的write()方法,写入文件 -
File file = new File("D:/lindaProjects/mySpace/wendao/WebContent/touxiang/" + newFileName); -
System.out.println(file.getAbsolutePath()); -
fileItem.write(file); -
// 6. 调用FileItem的delete()方法,删除临时文件 -
fileItem.delete(); -
/* -
* 存储到数据库时注意 1.保存源文件名称 Koala.jpg 2.保存相对路径 -
* image/1478509873038.jpg -
* -
*/ -
if (user != null) { -
int myid = user.getId(); -
String SQL = "INSERT INTO t_touxiang(image_path,user_id,old_name)VALUES(?,?,?)"; -
int rows = JdbcHelper.insert(SQL, false, "touxiang/" + newFileName, myid, fileName); -
if (rows > 0) { -
session.setAttribute("image_name", fileName); -
session.setAttribute("image_path", "touxiang/" + newFileName); -
response.sendRedirect(request.getContextPath() + "/upImage.html"); -
} else { -
} -
} else { -
session.setAttribute("loginFail", "请登录"); -
response.sendRedirect(request.getContextPath() + "/login.html"); -
} -
} -
} -
} catch (FileUploadException e) { -
e.printStackTrace(); -
} catch (Exception e) { -
e.printStackTrace(); -
} -
} -
} -
}
在完成图片上传并写入数据库的同时,将图片路径通过session的方式发送到HTML界面
-
<!DOCTYPE html> -
<html> -
<head> -
<meta charset="UTF-8"> -
<title>更换头像</title> -
</head> -
<body> -
<formaction="UploadServlet.do" method="post"enctype="multipart/form-data"> -
本地目录:<inputtype="file" name="uploadFile"> -
<img src="${image_path}" width="200" height="200"> -
<inputtype="submit" value="上传头像"/> -
</form> -
</body> -
</html>
至此,图片上传数据库和本地服务器已经实现,那么如何在HTML界面显示出个人信息以及上传的头像呢?
首先定义一个PersonServlet类,用来读取数据库的内容,并发送到HTML界面。
代码如下:
-
@WebServlet("/persons.do") -
public class PersonServlet extends HttpServlet { -
private static final long serialVersionUID = -800352785988546254L; -
protected void service(HttpServletRequest request, HttpServletResponse response) -
throws ServletException, IOException { -
// 判断上传表单是否为multipart/form-data类型 -
Touxiang tx=null; -
HttpSession session = request.getSession(); -
User user = (User) session.getAttribute("user"); // 在登录时将 User 对象放入了 会话 -
if(user!=null){ -
int myid=user.getId(); -
String SQL="SELECT id,image_path,old_name FROM t_touxiang WHERE user_id=?"; -
ResultSet rs=JdbcHelper.query(SQL,myid); -
String uSQL="SELECT username,password FROM t_user WHERE id=?"; -
ResultSet urs=JdbcHelper.query(uSQL,myid); -
System.out.println( "我的个人id是: " + myid); -
final List<Touxiang> touxiang=new ArrayList<>(); -
try { -
if(rs.next()) -
{ -
tx=new Touxiang(); -
tx.setId(rs.getInt(1)); -
tx.setImage_path(rs.getString(2)); -
tx.setOld_name(rs.getString(3)); -
touxiang.add(tx); -
} -
if(urs.next()){ -
user.setUsername(urs.getString(1)); -
user.setPassword(urs.getString(2)); -
user.setTouxiang(touxiang); -
} -
} catch (SQLException e) { -
// TODO Auto-generated catch block -
e.printStackTrace(); -
} -
session.setAttribute("user", user); -
System.out.println( "我的id: " + myid); -
response.sendRedirect( request.getContextPath() + "/person.html"); -
} -
} -
}
在HTML界面接收信息,并显示出来,代码如下:
-
<div> -
<form action="UploadServlet.do" method="post" enctype="multipart/form-data"> -
<div><a href="$path/upImage.html">更换头像</a></div> -
#foreach( $ut in $user.getTouxiang() ) -
<img src=" $ut.getImage_path()" width="200" height="200"> -
#end -
<div>我的头像:</div> -
<div>我的姓名:$user.getUsername()</div> -
<div><a href="$path/myAnswer.do">我的解答</a></div> -
<div><a href="$path/myQuestion.do">我的提问</a></div> -
</form> -
</div>
至此,一个基于Java的头像上传服务器,路径存储在MySQL,并在HTML界面读取出来的功能就基本实现了。头像上传之前进行处理等操作,可以选择一些插件来完成。这里只是简单的实现了基本功能。
补充
对于图片上传,这里只是简单的用Servlet实现了一下最基本的功能,仅提供思路。如果使用spring等框架,他都对图片上传做了很好的封装,应该更加容易。
后台实现图片上传应该来说比较容易,但是比较头疼的是图片上传原生的按钮丑出天际,这里推荐俩实用的上传控件,应该算比较好看。
1,H5实现的图片上传,可多张上传,可点击可拖拽上传,大概是这个样子:

基本的使用介绍和下载地址:http://blog.youkuaiyun.com/weixin_36380516/article/details/70352689
2,jQuery图像裁剪插件,大概长这样

不仅提供上传,还有裁剪等功能,UI做的也美,
地址:http://www.jq22.com/jquery-info318
本文详细介绍了使用Java实现用户头像上传的过程,包括利用MySQL存储路径、使用Servlet处理上传及展示头像等内容。

被折叠的 条评论
为什么被折叠?



