Java web实现头像上传以及读取显示
最近在做一个学生的信息管理系统，其中就有一个功能是要上传头像以及实现显示的功能，那么要如何实现呢？
思路:
1.如果要上传头像并要显示的话，可以创建一个工具类来将获取的头像另外复制一份放在工程目录下，并修改其文件名(防止名字相同有冲突)。
2.要创建表，另一个img表用于存放该学生的头像的存储路径、头像名称、以及该学生对应的ID。
3.在html页面中可通过设置表单在获取信息，注意的是由于表单的enctype属性要设为"multipart/form-data"，设置为该属性可以上传文件。
4.创建servlet来对数据进行封装，进行将数据添加数据库中，并将信息发送给页面
步骤:1.先将两个表给创建出来。这里我使用mysql进行创建,注意的是user的学号要和Img的学号用外键关联。
创建Img表
CREATE TABLE `img` ( `id` int(4) NOT NULL AUTO_INCREMENT, `image_path` varchar(255) DEFAULT NULL, `old_name` varchar(255) DEFAULT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB AUTO_INCREMENT=30 DEFAULT CHARSET=utf8
2.创建完数据库后，先将前台的html设计好，设置表单来获取用户填写的信息。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="js/jquery-2.1.0.min.js"></script>
</head>
<body>
<form action="addimgServlet" method="post" accept-charset="utf-8" enctype="multipart/form-data">
<div >
<img src="" width="150" height="150" id="previewimg">
</div>
<div >
<input type="file" id="img" name="img" onChange="preview(this)"/>
<span class="add">+</span>
</div>
<input type="submit" id="submit_content" value="发布">
</form>
</body>
<script type="text/javascript">
function preview(obj){
var img = document.getElementById("previewimg");
img.src = window.URL.createObjectURL(obj.files[0]);
}
</script>
</html>
3.创建一个工具类Fileupload.java,用于获取并处理表单中的数据。
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;
import javax.servlet.http.HttpServletRequest;
import java.io.File;
import java.util.*;
public class FileUpload {
private static final long serialVersionUID = 1L;
public Map<String,String> File_upload(HttpServletRequest request,String filepath) {
//判断上传的表单是否为multipart/form-data类型
if (ServletFileUpload.isMultipartContent(request)) {
try {
//1.创建DiskFileItemFactory对象,设置缓冲区大小和临时目录文件
DiskFileItemFactory factory = new DiskFileItemFactory();
//2.创建ServletFileUpload对象，并设置上传文件的大小限制
ServletFileUpload sfu = new ServletFileUpload(factory);
sfu.setSizeMax(10 * 1024 * 1024);//以byte为单位 1024byte->1KB*1024=1M->1M*10=10M
sfu.setHeaderEncoding("utf-8");
//3.调用ServletFileUpload.parseRequest方法来解析对象，得到一个保存了所有上传内容的List对象
List<FileItem> fileItemList = sfu.parseRequest(request);
Iterator<FileItem> fileItems = fileItemList.iterator();
//创建一个Map集合，用于添加表单元素
Map<String, String> map = new TreeMap<String, String>();
//4.遍历fileItems，每迭代一个对象，调用其isFormField方法判断是否是上传文件
while ((fileItems.hasNext())) {
FileItem fileItem = fileItems.next();
try{
//普通的表单元素
if (fileItem.isFormField()) {
String name = fileItem.getFieldName();//name的属性值
String value = fileItem.getString("utf-8");//name对应的value值
//添加进Map集合中
map.put(name, value);
} else {//否则即为<input type="file">上传的文件
if(fileItem.getName()==null||fileItem.getFieldName()==null){
map.put("fileName","empty");
map.put("newFileName","empty");
}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
//将文件名存入到数组中
map.put("fileName", fileName);
map.put("newFileName", newFileName);
// 5. 调用FileItem的write()方法，写入文件
String context = filepath+newFileName ;
System.out.println("图片的路径为"+context);
File file = new File(context);
System.out.println(file.getAbsolutePath());
fileItem.write(file);
//判断该文件是否为head_img下默认的头像，如果不是才执行删除
if(!fileName.contains("empty")|| !newFileName.contains("empty")){
// 6. 调用FileItem的delete()方法，删除临时文件
fileItem.delete();
}
}
}
}catch (StringIndexOutOfBoundsException e ){
//若为空指指针
//未上传图片则按原来的图片显示
//设置为false,在进行数据库操作时不对图片进行操作
System.out.println("出现异常");
map.put("fileName","empty");
map.put("newFileName","empty");
e.printStackTrace();
}
}
return map;
} catch (FileUploadException e) {
e.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
return null;
}
}
4.创建对应的servlet来处理用户添加的信息以及将数据分别存入到数据库中
注意：在这里添加信息到数据库中的操作和创建user对象是我在创建一个方法来实现，到时可根据自己的方法来实现方法
package domain;
public class Img {
private String fileName;
private String newFileName;
public String getFileName() {
return fileName;
}
public void setFileName(String fileName) {
this.fileName = fileName;
}
public String getNewFileName() {
return newFileName;
}
public void setNewFileName(String newFileName) {
this.newFileName = newFileName;
}
@Override
public String toString() {
return "Img{" +
"fileName='" + fileName + '\'' +
", newFileName='" + newFileName + '\'' +
'}';
}
}
package servlet;
import dao.UserDaoImpl;
import domain.Img;
import org.apache.commons.beanutils.BeanUtils;
import util.FileUpload;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.util.Map;
@WebServlet("/addimgServlet")
public class addimgServlet extends HttpServlet {
//为类可持久化
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
//通过工具类获取成员的信息
String file = getServletContext().getRealPath("/head_img/");
Map<String,String> map = new FileUpload().File_upload(request,file);
//创建img对象用来封装数据
Img img = new Img();
try {
BeanUtils.populate(img,map);
} catch (IllegalAccessException e) {
e.printStackTrace();
} catch (InvocationTargetException e) {
e.printStackTrace();
}
System.out.println("servlet获取的img数据为:"+img);
//创建service对象将头像数据存入到表中
UserDaoImpl userDao = new UserDaoImpl();
userDao.addimg(img);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
==========================
package servlet;
import com.fasterxml.jackson.databind.ObjectMapper;
import dao.UserDaoImpl;
import domain.Head_img;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@WebServlet("/getimgServlet")
public class getimgServlet extends HttpServlet {
//为类可持久化
private static final long serialVersionUID = 1L;
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
UserDaoImpl userDao = new UserDaoImpl();
Head_img img = userDao.getimg(Integer.parseInt(request.getParameter("id")));
System.out.println("获取的图象的路径为:"+img);
ObjectMapper mapper = new ObjectMapper();
response.setContentType("application/json;charset=utf-8");
mapper.writeValue(response.getOutputStream(),img);
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
5.最后，在userlList.html中接收信息并显示出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示图片</title>
<script src="js/jquery-2.1.0.min.js"></script>
<script>
function GetRequest() {
var url = location.search; //获取url中"?"符后的字串
var theRequest = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1);
strs = str.split("&");
for ( var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
return theRequest;
}
$(function () {
$.get("getimgServlet",{id:GetRequest()["id"]},function (data) {
$("#imgid").attr("src",data.image_path);
})
})
</script>
</head>
<body>
<h3>图片</h3>
<img width="150" height="150" id="imgid">
</body>
</html>
实现后效果如下
此时打开数据库便发现添加了该图片对应的数据
如何根据对应的id来获取图片的路径并显示出来
基本效果就这样子
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaWeb项目实现文件上传动态显示进度实例
很久没有更新博客了,这段时间实在的忙的不可开交,项目马上就要上线了,要修补的东西太多了.当我在学习JavaWeb文件上传的时候,我就一直有一个疑问,网站上那些博客的图片是怎么上传的,因为当提交了表单之后网页就跳转了.后来我学习到了Ajax,我知道了浏览器可以异步的发送响应,这时我又有新的疑问,那就是在我上传一些文件的时候,那些网站的上传进度是怎么做到的,因为servlet直到上传完成之后才完成响应. 最近我们的项目中有一个地方中需要用到一个功能,当用户点击一个处理按钮时,前台会实时的显示后台处理
-
java 教你如何给你的头像添加一个好看的国旗
今天朋友圈又火了,听说原因是 @腾讯官网 就能得到一顶绿色的帽子,啊呸,是一个好看的国庆节头像,可是听说没一会就502了,那么我们自己动手实现一个吧 由于代码比较简单就不一一介绍了. var cvs = document.getElementById("cvs"); var ctx = cvs.getContext("2d"); var exportImage = document.getElementById("export"); var im
-
Java Struts图片上传至指定文件夹并显示图片功能
继上一次利用Servlet实现图片上传,这次利用基于MVC的Struts框架,封装了Servlet并简化了JSP页面跳转. JSP上传页面 上传一定要为form加上enctype="multipart/form-data",表示提交的数据时二进制的 并且必须是method="post" <%@ page language="java" contentType="text/html; charset=utf-8" page
-
Java Servlet上传图片到指定文件夹并显示图片
在学习Servlet过程中,针对图片上传做了一个Demo,实现的功能是:在a页面上传图片,点击提交后,将图片保存到服务器指定路径(D:/image):跳转到b页面,b页面读取展示绝对路径(D:/image)的图片.主要步骤如下: 步骤一:上传页面uploadphoto.jsp 需要注意两个问题: 1.form 的method必须是post的,get不能上传文件, 还需要加上enctype="multipart/form-data" 表示提交的数据是二进制文件. 2.需要提供type=&
-
Java动态显示文件上传进度实现代码
实现文件上传的进度显示,我们先看看都有哪些问题我们要解决. 1 上传数据的处理进度跟踪 2 进度数据在用户页面的显示 就这么2个问题, 第一个问题,主要是组件的选择 必须支持数据处理侦听或通知的组件.当然,我肯定只用我自己的组件啦.基本原理是 1 使用request.getContentLength() 读取到处理数据的总长度,注意这个长度不等于文件的长度,因为Base64等编码会增加数据量,如果超过了允许的长度,直接返回-1; 2 在每读取一部分数据时(比如一行,或者64K,或者你自定义的字节
-
Java web实现头像上传以及读取显示
最近在做一个学生的信息管理系统,其中就有一个功能是要上传头像以及实现显示的功能,那么要如何实现呢? 思路: 1.如果要上传头像并要显示的话,可以创建一个工具类来将获取的头像另外复制一份放在工程目录下,并修改其文件名(防止名字相同有冲突).2.要创建表,另一个img表用于存放该学生的头像的存储路径.头像名称.以及该学生对应的ID.3.在html页面中可通过设置表单在获取信息,注意的是由于表单的enctype属性要设为"multipart/form-data",设置为该属性可以上传文件.4
-
java web FTPClient实现上传文件到指定服务器
FPClient 实现上传文件到指定服务器,供大家参考,具体内容如下 调用 FileInputStream in=new FileInputStream(new File(fileUrl)); moveFile("10.3.3.**", 21, "username", "password", path, filename, in); 方法 /** * Description: 向FTP服务器上传文件 * @param url FTP服务器host
-
用java在web环境下上传和下载文件的技巧
文件上传在web应用中非常普遍,要在jsp环境中实现文件上传功能是非常容易的,因为网上有许多用java开发的文件上传组件,本文以commons-fileupload组件为例,为jsp应用添加文件上传功能. common-fileupload组件是apache的一个开源项目之一,可以从http://jakarta.apache.org/commons/fileupload/下载. 用该组件可实现一次上传一个或多个文件,并可限制文件大小. 下载后解压zip包,将commons-fileupload-
-
java 文件上传到读取文件内容的实例
1.下载文件,将文件保存到本地.(只试用excel): 2.对文件的标题进行检验: 3.获取导入的批次(取一个表的一个值,加1): 4.循环获取文件某一个行,某一列的值,set到对象中: 5.检验值的合法性: 6.循环保存到对象中. 7.用map将错误的信息和正确的信息,JSONObject.fromObject(map): public String uploadFile() throws Exception { logger.info("开始导入规则文件:" + fileInput
-
AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页
1.引言 2.实现代码 2.1.服务器端代码 2.1.1. 文件上传状态类(FileUploadStatus) 2.1.2. 文件上传状态侦听类(FileUploadListener) 2.1.3. 后台服务类(BackGroundService) 2.1.4. 文件上传状态控制类(BeanControler) 2.2. 客户端代码 2.2.1. AjaxWrapper.js 2.2.2. fileUpload.html 2.2.3. result.jsp 2.2.4. fileUpload.c
-
java把excel内容上传到mysql实例代码
mysql 表列名 num1,num2,num3,num4,num5,num6 表名Excle 上传的方法 package com.web.connection; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import org.apache.commons.logging.Log; import org.apache.commons.loggi
-
java实现简单图片上传下载功能
本文实例为大家分享了java实现简单图片上传下载的具体代码,供大家参考,具体内容如下 1.首先在上传图片界面:将form表单的enctype改为:multipart/form-data 2.定义一个实体类用来将存放图片存放的路径存入到mysql中private String imgpath; 3.在spring容器中注入处理图片的解析器 <bean name="multipartResolver" class="org.springframework.web.multi
-
Java实现文件分片上传接口的示例代码
目录 java后端分片上传接口 前端分片 java后端分片上传接口 文件上传工具--FileUtil package com.youmejava.chun.util; import lombok.Data; import org.apache.tomcat.util.http.fileupload.FileUtils; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; imp
-
Java操作FTP实现上传下载功能
目录 FTP简介 FTP架构 FTP数据连接模式 用户认证 客户端 Vsftp安装与配置 启动服务 配置文件说明 传输模式配置 系统用户配置 java操作ftp文件服务器 1.引入依赖 2.提供接口 3.对提供操作ftp接口进行实现 4.配置ftp相关参数 5.写测试controller FTP简介 文件传输协议(File Transfer Protocol,FTP)是用于在网络上进行文件传输的一套标准协议,它工作在 OSI 模型的第七层,TCP 模型的第四层, 即应用层, 使用 TCP 传输而
-
Java中实现文件上传下载的三种解决方案(推荐)
java文件上传与文件下载是程序开发中比较常见的功能,下面通过本文给大家介绍Java中实现文件上传下载的三种解决方案,具体详情如下所示: 第一点:Java代码实现文件上传 FormFile file=manform.getFile(); String newfileName = null; String newpathname=null; String fileAddre="/numUp"; try { InputStream stream = file.getInputStream(