在开发中图片上传用的比较多，所以这也是我们必会的一项的开发技能。直接上代码
1、jsp
这是一个整体的页面，实现信息的完善，重点的部分我已经加粗。
图片实现预览实在js实现的，代码也加粗
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!doctype html>
<html>
<head>
<base href="<%=basePath %>" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>小白XBIT酒店</title>
<meta name="description" content="这是一个 index 页面">
<meta name="keywords" content="index">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="renderer" content="webkit">
<meta http-equiv="Cache-Control" content="no-siteapp" />
<link rel="icon" type="image/png" href="static/i/favicon.png">
<link rel="apple-touch-icon-precomposed" href="static/i/[email protected]">
<meta name="apple-mobile-web-app-title" content="Amaze UI" />
<link rel="stylesheet" href="static/css/amazeui.min.css" />
<link rel="stylesheet" href="static/css/admin.css">
<link rel="stylesheet" href="static/css/app.css">
</head>
<body data-type="generalComponents">
<header class="am-topbar am-topbar-inverse admin-header">
<div class="am-topbar-brand">
<a href="javascript:;" class="tpl-logo">
<img src="static/img/logo.png" alt="">
</a>
</div>
<div class="am-icon-list tpl-header-nav-hover-ico am-fl am-margin-right">
</div>
<button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only" data-am-collapse="{target: '#topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span class="am-icon-bars"></span></button>
<div class="am-collapse am-topbar-collapse" id="topbar-collapse">
<ul class="am-nav am-nav-pills am-topbar-nav am-topbar-right admin-header-list tpl-header-list">
</ul>
</div>
</header>
<div class="tpl-page-container tpl-page-header-fixed">
<jsp:include page="/views/left/menu.jsp"/>
<div class="tpl-content-wrapper">
<div class="tpl-portlet-components">
<div class="portlet-title">
<div class="caption font-green bold">
<span class="am-icon-code"></span> 完善收银员信息
</div>
<div class="tpl-portlet-input tpl-fz-ml">
<div class="portlet-input input-small input-inline">
<div class="input-icon right">
<input type="hiddent" class="form-control form-control-solid" placeholder="搜索..."> </div>
</div>
</div>
</div>
<div class="tpl-block ">
<div class="am-g tpl-amazeui-form">
<div class="am-u-sm-12 am-u-md-9">
<form class="am-form am-form-horizontal" action="info/add" method="post" enctype="multipart/form-data" >
<div class="am-form-group">
<label for="user-name" class="am-u-sm-3 am-form-label">姓名 </label>
<div class="am-u-sm-9">
<td><input type="text" name="username" id="user-name" placeholder="姓名"> </td>
<td style=" color:#CC3300">${username}</td>
</div>
</div>
<div class="am-form-group">
<label for="user-email" class="am-u-sm-3 am-form-label">性别</label>
<div class="am-u-sm-9">
<input type="radio" value="男" name="sex">男 <input type="radio" value="女" name="sex">女<Br />
<td style=" color:#CC3300">${sex}</td>
</div>
</div>
<div class="am-form-group">
<label for="user-phone" class="am-u-sm-3 am-form-label">电话</label>
<div class="am-u-sm-9">
<input type="text" name="telphone" id="user-phone" placeholder="电话 " >
<td style=" color:#CC3300">${telphone}</td>
</div>
</div>
<div class="am-form-group">
<label for="user-name" class="am-u-sm-3 am-form-label">邮箱</label>
<div class="am-u-sm-9">
<input type="text" name="email" id="user-phone" placeholder="邮箱 " >
<td style=" color:#CC3300">${email}</td>
</div>
</div>
<div class="am-form-group">
<label for="user-name" class="am-u-sm-3 am-form-label">照片</label>
<div class="am-u-sm-9">
**<input type="file" name="file" id="user-name" onchange="changepic(this)" placeholder="照片">
<img src="" id="show" width="200">**
</div>
</div>
<div class="am-form-group">
<div class="am-u-sm-9 am-u-sm-push-3">
<input type="submit" value="提交" class="am-btn am-btn-primary" />
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
**<script type="text/javascript">
function changepic(obj) {
//console.log(obj.files[0]);//这里可以获取上传文件的name
var newsrc=getObjectURL(obj.files[0]);
document.getElementById('show').src=newsrc;
}
//建立一個可存取到該file的url
function getObjectURL(file) {
var url = null ;
// 下面函数执行的效果是一样的，只是需要针对不同的浏览器执行不同的 js 函数而已
if (window.createObjectURL!=undefined) { // basic
url = window.createObjectURL(file) ;
} else if (window.URL!=undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file) ;
} else if (window.webkitURL!=undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file) ;
}
return url ;
}
</script>**
<script src="static/js/jquery.min.js"></script>
<script src="static/js/amazeui.min.js"></script>
<script src="static/js/app.js"></script>
</body>
</html>
2、ssm的后台
这是重点，进行图片的文件的处理，直接上代码，有解释注解。
重点的部分我已经加粗，我这里用到了数据的校验，你们可以直接删除。
@RequestMapping("add")
public ModelAndView add(HttpSession session,**MultipartFile file ,**@Valid info inf,BindingResult result) throws IOException {
**ModelAndView mav=new ModelAndView();
//图片上传成功后，将图片的地址写到数据库
String filePath = "E:\\upload";//保存图片的路径
//获取原始图片的拓展名
String originalFilename = file.getOriginalFilename();
//新的文件名字
String newFileName = UUID.randomUUID()+originalFilename;
//封装上传文件位置的全路径
File targetFile = new File(filePath,newFileName);**
Map< String, Object> map=new HashMap<String, Object>();
List<FieldError> errors=result.getFieldErrors();
user u = (user)session.getAttribute("user");//判断登录用户是否失效
if(u==null) {
mav.setViewName("login");
return mav;
}else {
if(result.hasErrors()) {
for(FieldError fielderror:errors) {
map.put(fielderror.getField(), fielderror.getDefaultMessage());
}
System.out.println("test");
return new ModelAndView("addinfo",map);
}else {
String email=inf.getEmail();
String sex = inf.getSex();
String telphone = inf.getTelphone();
String username = inf.getUsername();
file.transferTo(targetFile);//把本地文件上传到封装上传文件位置的全路径
infoserviceimpl.addinfo(username, sex, telphone, email, newFileName);
info listinfo=infoserviceimpl.selectinfo(username);
mav.addObject("infomation", listinfo);
mav.setViewName("info");
return mav;
}
}
}
承接毕业设计：微信小程序、ssm和树莓派硬件
有开发好的毕业设计可直接购买，价格便宜。
扫描下面二维码加微信（非诚勿扰）：
