Layui에서 이미지 업로드에 대한 자세한 설명(코드 포함)-레이이 튜토리얼-php.cn

Layui에서 이미지 업로드에 대한 자세한 설명(코드 포함)

尚

풀어 주다： 2019-11-26 13:40:31

앞으로

6397명이 탐색했습니다.

Layui에서 이미지 업로드에 대한 자세한 설명(코드 포함)

layui 업로드는 플러그인을 다운로드할 필요가 없다는 점을 제외하면 부트스트랩 업로드와 유사합니다.

layui 자체 버전은 이제 프론트 엔드 인터페이스를 살펴보겠습니다.

Layui에서 이미지 업로드에 대한 자세한 설명(코드 포함)

먼저 클릭하면 업로드가 시작됩니다.

은 json을 반환하고 양식에 추가합니다. 양식에 다른 데이터와 함께 제출

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(&#39;upload&#39;,function(){
            var upload = layui.upload;
            upload.render({
                elem: &#39;#fileBtn&#39;
                ,url: &#39;../updatePersonalById.do&#39;
                ,accept: &#39;file&#39;
                ,auto: false
                ,bindAction: &#39;#uploadBtn&#39;
                ,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">&#xe67c;</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(&#39;.&#39;));
        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에서 이미지 업로드에 대한 자세한 설명(코드 포함)