溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章給大家分享的是有關layui如何上傳圖片的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
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如何上傳圖片”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
