ssm框架下上传图片及其他信息
先引入这两个包:
<dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency> <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</artifactId> <version>1.3.1</version> </dependency>
html:
注意:enctype="multipart/form-data" 这个要这样定义
<form id="form-register" action="${pageContext.request.contextPath}/user/upLoadPicture.do" method="post" enctype="multipart/form-data" onsubmit="return check()" class="form-horizontal m-t"> <div class="form-group"> <label class="col-sm-5 control-label">上传头像:</label> <input type="file" name="file" id="file" style="height:30px;background-color:#ff9900;outline:none;border:none;width:10%;" onchange="uploadPic()"> </div> <div class="form-group"> <label class="col-sm-5 control-label">头像显示:</label> <div class="col-sm-4" > <img border="0" width="40" height="50" src="${user.picture}"> </div> </div> <input type="hidden" name="id" id="id" readonly="readonly" value="${user.id}" /> <div class="form-group"> <label class="col-sm-5 control-label"><span style="color: red;">*</span>用户名:</label> <div class="col-sm-4" > <input type="text" id="name" name="name" class="form-control" placeholder="请输入用户名" onblur="checkName()" maxlength="16" value="${user.name}"> <div id="user_prompt">用户名由4到16位(字母,数字,下划线,减号)</div> </div> </div> <div class="form-group"> <label class="col-sm-5 control-label">真实姓名:</label> <div class="col-sm-4"> <input type="text" id="realName" name="realName" class="form-control" placeholder="请输入真实姓名" value="${user.realName}"> </div> </div> <div class="form-group"> <label class="col-sm-5 control-label">性别</label> <div class="col-sm-4"> <c:if test="${user.gender=='男'}"> <div class="radio-box" style="float:left"> <input name="gender" type="radio" id="male" value="男" checked> <label for="sex-1">男</label> </div> <div class="radio-box" style="float:left"> <input name="gender" type="radio" id="female" value="女"> <label for="sex-2">女</label> </div> </c:if> <c:if test="${user.gender=='女'}"> <div class="radio-box" style="float:left"> <input name="gender" type="radio" id="male" value="男"> <label for="sex-1">男</label> </div> <div class="radio-box" style="float:left"> <input name="gender" type="radio" id="female" value="女" checked> <label for="sex-2">女</label> </div> </c:if> </div> </div> <div class="form-group"> <label class="col-sm-5 control-label">民族</label> <div class="col-sm-4"> <select name="ethGro" class="form-control input-sm"> <option selected="selected" value="${user.ethGro}">${user.ethGro}</option> </select> </div> </div> <br> <div class="form-group" align=center> <div class="col-sm-8 col-sm-offset-2"> <button class="btn btn-primary" type="submit">保存</button> </div> </div> </form
后台:
@RequestMapping(value="upLoadPicture.do",method = RequestMethod.POST) public String upload(User user,HttpServletRequest request,ModelMap map) throws Exception{ System.out.println(request.getParameter("name")); //保存数据库的路径 String sqlPath = null; //定义文件保存的本地路径 String localPath="D:\\File\\"; //创建文件 File dir=new File(localPath); if(!dir.exists()){ dir.mkdirs(); } //定义 文件名 String filename=request.getParameter("name").toString(); if(!user.getFile().isEmpty()){ //生成uuid作为文件名称 String uuid = UUID.randomUUID().toString().replaceAll("-",""); //获得文件类型(可以判断如果不是图片,禁止上传) String contentType=user.getFile().getContentType(); //获得文件后缀名 String suffixName=contentType.substring(contentType.indexOf("/")+1); //得到 文件名 filename=uuid+"."+suffixName; System.out.println(filename); //文件保存路径 user.getFile().transferTo(new File(localPath+filename)); sqlPath = "/images/"+filename; System.out.println(sqlPath); user.setPicture(sqlPath); userService.updateUser(user); } //把图片的相对路径保存至数据库 userService.updateUserNoPicture(user); Page page=new Page(); page.setCurrentPage(1); List<User> users = userService.getAllUser(page); page.setRows( userService.count()); map.addAttribute("page",page); map.addAttribute("users",users); return "user_list"; }