layui上传与bootstrap上传相似，只是不需要下插件，
layui自带的已够用 先看一下前台界面，这里是用到的上传头像
先点击开始上传，头像上传至服务器中，
返回json添加至form表单中，与其他数据一起提交
先看一下jsp界面
<%@ page language="java" contenttype="text/html; charset=utf-8" pageencoding="utf-8"%><!doctype html public "-//w3c//dtd html 4.01 transitional//en" "http://www.w3.org/tr/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>个人资料</title><link href="${pagecontext.request.contextpath }/js/layui/css/layui.css" rel="stylesheet" /><script src="${pagecontext.request.contextpath }/js/layui/layui.js" charset="utf-8"></script><script src="${pagecontext.request.contextpath }/js/jquery-1.8.3.js"></script><script type="text/javascript"> layui.use('upload',function(){ var upload = layui.upload; upload.render({ elem: '#filebtn' ,url: '../updatepersonalbyid.do' ,accept: 'file' ,auto: false ,bindaction: '#uploadbtn' ,done: function(res){ alert(res.data.src); $("[name=userimage]").val(res.data.src); } }); }); </script></head><body> <form class="layui-form" action="../updatepersonalbyidsuccess.do" method="post" charset="utf-8" target="_parent"> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">编号</label> <div class="layui-input-block"> <input type="text" name="userid" required lay-verify="required" value="${ui.userid }" autocomplete="off" readonly="readonly" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">登录名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" value="${ui.username }" autocomplete="off" readonly="readonly" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="userpwd" required lay-verify="required" value="${ui.userpwd }" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">确认密码</label> <div class="layui-input-block"> <input type="password" name="reuserpwd" required lay-verify="required" value="${ui.userpwd }" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">真实姓名</label> <div class="layui-input-block"> <input type="text" name="userrealname" required lay-verify="required" value="${ui.userrealname }" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">电话</label> <div class="layui-input-block"> <input type="text" name="userphone" required lay-verify="required" value="${ui.userphone }" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <label class="layui-form-label">地址</label> <div class="layui-input-block"> <input type="text" name="userads" required lay-verify="required" value="${ui.userads }" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-upload"> <label class="layui-form-label">头像:</label> <div class="layui-upload layui-input-block"> <input type="hidden" name="userimage" value="${ui.userimage }" required lay-verify="required" /> <button type="button" class="layui-btn layui-btn-primary" id="filebtn"><i class="layui-icon"></i>选择文件</button> <button type="button" class="layui-btn layui-btn-warm" id="uploadbtn">开始上传</button> </div> </div> <div class="layui-form-item" style="margin-top: 20px;"> <div class="layui-input-block"> <button class="layui-btn" id="btn1" lay-submit lay-filter="formdemo">提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form></body></html>
与controller交互的.do
package com.supermanager.controller;import java.io.file;import java.io.ioexception;import java.util.date;import java.util.list;import java.util.random;import javax.annotation.resource;import javax.servlet.http.httpservletrequest;import javax.servlet.http.httpsession;import org.springframework.context.annotation.scope;import org.springframework.stereotype.controller;import org.springframework.web.bind.annotation.modelattribute;import org.springframework.web.bind.annotation.requestmapping;import org.springframework.web.bind.annotation.requestparam;import org.springframework.web.bind.annotation.responsebody;import org.springframework.web.multipart.multipartfile;import com.supermanager.entity.logsinfo;import com.supermanager.entity.roleinfo;import com.supermanager.entity.storagesinfo;import com.supermanager.entity.userinfo;import com.supermanager.service.logsservice;import com.supermanager.service.roleinfoservice;import com.supermanager.service.storagesservice;import com.supermanager.service.userinfoservice;import net.sf.json.jsonarray;@controller@scope("prototype")public class userinfocontroller { @resource private userinfoservice userinfoservice; @resource private logsservice logservice; @resource private roleinfoservice roleinfoservice; @resource private storagesservice storagesservice; /** * 修改个人资料 * @param session * @param file * @param ui * @return * @throws ioexception * @throws illegalstateexception */ @requestmapping(value="updatepersonalbyid") public @responsebody string updatepersonal(@requestparam("file") multipartfile file,@modelattribute userinfo ui,httpservletrequest request) throws illegalstateexception, ioexception{ string oldname = file.getoriginalfilename(); string path = request.getservletcontext().getrealpath("/upload/"); string filename = changename(oldname); string rappendix = "upload/" + filename; filename = path + "/" + filename; file file1 = new file(filename); file.transferto(file1); string str = "{\"code\": 0,\"msg\": \"\",\"data\": {\"src\":\"" + rappendix + "\"}}"; return str; } public static string changename(string oldname){ random r = new random(); date d = new date(); string newname = oldname.substring(oldname.indexof('.')); newname = r.nextint(99999999) + d.gettime() + newname; return newname; } @requestmapping(value="updatepersonalbyidsuccess") public string updatepersonalbyidsuccess(@modelattribute userinfo ui){ userinfo uif = userinfoservice.finduserbyuserid(ui.getuserid()); ui.setroleid(uif.getroleid()); ui.setusersex(uif.getusersex()); ui.setuserage(uif.getuserage()); int a = userinfoservice.update(ui); if(a!=0){ return "redirect:exitsystem.do"; } return "error"; } }
上传成功之后的效果如图
更多layui相关文章请关注layui使用教程栏目。
以上就是layui上传图片详解（附代码）的详细内容。