這篇文章將為大家詳細(xì)講解有關(guān)layui實(shí)現(xiàn)圖片上傳的方法，文章內(nèi)容質(zhì)量較高，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價(jià)比寶豐網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫(kù),直接使用。一站式寶豐網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋寶豐地區(qū)。費(fèi)用合理售后完善，十載實(shí)體公司更值得信賴。

layui上傳與bootstrap上傳相似，只是不需要下插件，

layui自帶的已夠用 先看一下前臺(tái)界面，這里是用到的上傳頭像

先點(diǎn)擊開始上傳，頭像上傳至服務(wù)器中，

返回json添加至form表單中，與其他數(shù)據(jù)一起提交

先看一下jsp界面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>












    

         

            編號(hào)
            

              
            
          
           

            登錄名
            

              
            
          
           

            密碼
            

              
            
          
          

            確認(rèn)密碼
            

              
            
          
           

            真實(shí)姓名
            

              
            
          
           

            電話
            

              
            
          
           

            地址
            

              
            
          
          

                頭像:
                

                    
                    選擇文件
                    開始上傳
                
            
             

                  

                  提交
                  重置
                
             
          
    

與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;
    

    /**
     * 修改個(gè)人資料
     * @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實(shí)現(xiàn)圖片上傳的方法，看完之后是否有所收獲呢？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊，感謝各位的閱讀。