layui如何上传图片

这篇文章给大家分享的是有关layui如何上传图片的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

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

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

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

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

先看一下jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%>    
         
            编号            
                          
          
           
            登录名            
                          
          
           
            密码            
                          
          
          
            确认密码            
                          
          
           
            真实姓名            
                          
          
           
            电话            
                          
          
           
            地址            
                          
          
          
                头像:                
                                        选择文件                    开始上传                
            
             
                  
                  提交                  重置                
             
              

与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如何上传图片"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！