Shulou(Shulou.com)06/03 Report--

This article is about how layui uploads pictures. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Layui upload is similar to bootstrap upload, except that no plugin is required.

What comes with layui is enough to take a look at the front desk interface. Here is the upload profile picture.

Click to start uploading, and upload the avatar to the server.

Return json to add to the form form and submit along with other data

Take a look at the jsp interface first.

Personal data 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);});}) Number, login name, password Confirm the password, real name, phone number. Address profile photo:  selects a file to start uploading Submit reset

.do that interacts with Controller

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 / * modify personal data * @ param session * @ param file * @ param ui * @ 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 (aversion 0) {return "redirect:exitSystem.do";} return "error";}} Thank you for reading! This is the end of the article on "how to upload pictures on layui". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.