上传头像，layui上传图片

layui上传与bootstrap上传相似，只是不需要下插件，

layui自带的已够用先看一下前台界面，这里是用到的上传头像

先点击开始上传，头像上传至服务器中，

返回json添加至form表单中，与其他数据一起提交

先看一下jsp界面

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>个人资料</title>
 8 <link href="${pageContext.request.contextPath }/js/layui/css/layui.css"
 9     rel="stylesheet" />
10 <script src="${pageContext.request.contextPath }/js/layui/layui.js"
11     charset="utf-8"></script>
12 <script src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
13 <script type="text/javascript">
14         layui.use('upload',function(){
15             var upload = layui.upload;
16             upload.render({
17                 elem: '#fileBtn'
18                 ,url: '../updatePersonalById.do'
19                 ,accept: 'file'
20                 ,auto: false
21                 ,bindAction: '#uploadBtn'
22                 ,done: function(res){
23                     alert(res.data.src);
24                     $("[name=userImage]").val(res.data.src);
25                 }
26             });
27         });
28     </script>
29 
30 </head>
31 <body>
32     <form class="layui-form" action="../updatePersonalByIdSuccess.do" method="post" charset="utf-8" target="_parent">
33          <div class="layui-form-item" style="margin-top: 20px;">
34             <label class="layui-form-label">编号</label>
35             <div class="layui-input-block">
36               <input type="text" name="userId" required  lay-verify="required" value="${ui.userId }" autocomplete="off" readonly="readonly" class="layui-input">
37             </div>
38           </div>
39            <div class="layui-form-item" style="margin-top: 20px;">
40             <label class="layui-form-label">登录名</label>
41             <div class="layui-input-block">
42               <input type="text" name="userName" required  lay-verify="required" value="${ui.userName }" autocomplete="off" readonly="readonly" class="layui-input">
43             </div>
44           </div>
45            <div class="layui-form-item" style="margin-top: 20px;">
46             <label class="layui-form-label">密码</label>
47             <div class="layui-input-block">
48               <input type="password" name="userPwd" required  lay-verify="required" value="${ui.userPwd }" autocomplete="off" class="layui-input">
49             </div>
50           </div>
51           <div class="layui-form-item" style="margin-top: 20px;">
52             <label class="layui-form-label">确认密码</label>
53             <div class="layui-input-block">
54               <input type="password" name="reuserPwd" required  lay-verify="required" value="${ui.userPwd }" autocomplete="off" class="layui-input">
55             </div>
56           </div>
57            <div class="layui-form-item" style="margin-top: 20px;">
58             <label class="layui-form-label">真实姓名</label>
59             <div class="layui-input-block">
60               <input type="text" name="userrealName" required  lay-verify="required" value="${ui.userrealName }" autocomplete="off" class="layui-input">
61             </div>
62           </div>
63            <div class="layui-form-item" style="margin-top: 20px;">
64             <label class="layui-form-label">电话</label>
65             <div class="layui-input-block">
66               <input type="text" name="userPhone" required  lay-verify="required" value="${ui.userPhone }" autocomplete="off" class="layui-input">
67             </div>
68           </div>
69            <div class="layui-form-item" style="margin-top: 20px;">
70             <label class="layui-form-label">地址</label>
71             <div class="layui-input-block">
72               <input type="text" name="userAds" required  lay-verify="required" value="${ui.userAds }" autocomplete="off" class="layui-input">
73             </div>
74           </div>
75           <div class="layui-upload">
76                 <label class="layui-form-label">头像:</label>
77                 <div class="layui-upload layui-input-block">
78                     <input type="hidden" name="userImage" value="${ui.userImage }" required lay-verify="required" />
79                     <button type="button" class="layui-btn layui-btn-primary" id="fileBtn"><i class="layui-icon">&#xe67c;</i>选择文件</button>
80                     <button type="button" class="layui-btn layui-btn-warm" id="uploadBtn">开始上传</button>
81                 </div>
82             </div>
83              <div class="layui-form-item" style="margin-top: 20px;">
84                   <div class="layui-input-block">
85                   <button class="layui-btn" id="btn1" lay-submit lay-filter="formDemo">提交</button>
86                   <button type="reset" class="layui-btn layui-btn-primary">重置</button>
87                 </div>
88              </div>
89           
90     </form>
91 </body>
92 </html>

与Controller交互的.do

 1 package com.supermanager.controller;
 2 
 3 import java.io.File;
 4 import java.io.IOException;
 5 import java.util.Date;
 6 import java.util.List;
 7 import java.util.Random;
 8 
 9 import javax.annotation.Resource;
10 import javax.servlet.http.HttpServletRequest;
11 import javax.servlet.http.HttpSession;
12 
13 import org.springframework.context.annotation.Scope;
14 import org.springframework.stereotype.Controller;
15 import org.springframework.web.bind.annotation.ModelAttribute;
16 import org.springframework.web.bind.annotation.RequestMapping;
17 import org.springframework.web.bind.annotation.RequestParam;
18 import org.springframework.web.bind.annotation.ResponseBody;
19 import org.springframework.web.multipart.MultipartFile;
20 
21 import com.supermanager.entity.LogsInfo;
22 import com.supermanager.entity.RoleInfo;
23 import com.supermanager.entity.StoragesInfo;
24 import com.supermanager.entity.UserInfo;
25 import com.supermanager.service.LogsService;
26 import com.supermanager.service.RoleInfoService;
27 import com.supermanager.service.StoragesService;
28 import com.supermanager.service.UserInfoService;
29 
30 import net.sf.json.JSONArray;
31 
32 @Controller
33 @Scope("prototype")
34 public class UserInfoController {
35 
36     @Resource
37     private UserInfoService userInfoService;
38     @Resource
39     private LogsService logService;
40     @Resource
41     private RoleInfoService roleInfoService;
42     @Resource
43     private StoragesService storagesService;
44     
45 
46     /**
47      * 修改个人资料
48      * @param session
49      * @param file
50      * @param ui
51      * @return
52      * @throws IOException 
53      * @throws IllegalStateException 
54      */
55     @RequestMapping(value="updatePersonalById")
56     public @ResponseBody String updatePersonal(@RequestParam("file") MultipartFile file,@ModelAttribute UserInfo ui,HttpServletRequest request) throws IllegalStateException, IOException{
57         String oldName = file.getOriginalFilename();
58         String path = request.getServletContext().getRealPath("/upload/");
59         String fileName = changeName(oldName);
60         String rappendix = "upload/" + fileName;
61         fileName = path + "/" + fileName;
62         File file1 = new File(fileName);
63         file.transferTo(file1);
64         String str = "{\"code\": 0,\"msg\": \"\",\"data\": {\"src\":\"" + rappendix + "\"}}";
65         return str;
66     }
67     public static String changeName(String oldName){
68         Random r = new Random();
69         Date d = new Date();
70         String newName = oldName.substring(oldName.indexOf('.'));
71         newName = r.nextInt(99999999) + d.getTime() + newName;
72         return newName;
73     }
74     @RequestMapping(value="updatePersonalByIdSuccess")
75     public  String updatePersonalByIdSuccess(@ModelAttribute UserInfo ui){
76         UserInfo uif = userInfoService.FindUserByUserId(ui.getUserId());
77         ui.setRoleId(uif.getRoleId());
78         ui.setUserSex(uif.getUserSex());
79         ui.setUserAge(uif.getUserAge());
80         int a = userInfoService.Update(ui);
81         if(a!=0){
82             return "redirect:exitSystem.do";
83         }
84         return "error";
85     }
86     
87     
88     
89 }

 上传成功之后的效果如图

posted @ 2018-01-11 16:21 念念不忘、阅读(16130) 评论(1) 编辑收藏举报

刷新页面返回顶部

念念不忘

非常欢迎，GitHub地址：https://lviter.github.io/professional/

上传头像，layui上传图片

公告