끄적끄적 코딩일지

[Spring]이미지 월드컵 만들기(5) - 이미지 업로드(1) 본문

Project/[Spring] 이미지 월드컵 만들기

[Spring]이미지 월드컵 만들기(5) - 이미지 업로드(1)

BaekGyuHyeon 2022. 5. 23. 21:43

원래 저번글에서 마치고 Spring Security를 하려고 했으나 괜히 아직 없는 기능에 보안부터 적용하는것 같아서 그냥 UI부터 설계하기로 했다.

만들어야할 페이지는 메인(월드컵 리스트 표시),로그인, 회원가입, 월드컵 게임 페이지, 월드컵 게임 결과 페이지, 월드컵 게임 등록 페이지.... 분명 단순한 토이프로젝트로 시작하려고 했었는데 왤케 만들 페이지가 많지... 토이프로젝트니까 걍 로그인 기능 뺄까....

 

어찌됬든 마음 다잡고 다시 개발 시작

일단 Javascript코드가 가장 복잡할것 같은 월드컵 게임 페이지부터 만들기로 했다.

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title th:text="${worldcup.title}">Title</title>
    <link rel="stylesheet" href="//unpkg.com/bootstrap@4/dist/css/bootstrap.min.css">
    <script src='//unpkg.com/jquery@3/dist/jquery.min.js'></script>
    <script src='//unpkg.com/bootstrap@4/dist/js/bootstrap.min.js'></script>
    <script type="text/javascript" src="/js/worldcup_play.js"></script>
</head>
<body>
    <h3 class="current_title" id="game-current"></h3>
    <div class="container">
        <div class="row h-100">
            <div class="col-md-6" onclick="winsWorldCupItem(this.title)" title-="">
                <img class="w-100 h-100" src="" id="img-left">
                <p class="img_discript" id="img-dsc-left"></p>
            </div>
            <div class="col-md-6" onclick="winsWorldCupItem(this.title)" title="">
                <img class="w-100 h-100" src="" id="img-right">
                <p class="img_discript" id="img-dsc-right"></p>
            </div>
        </div>
    </div>
</body>
</html>

그리고 이미지 선택 이벤트 js 파일

let sessionStorage = window.sessionStorage;
let items = sessionStorage.getItem("items")
let idx= 0;
let worldcupNumber = sessionStorage.getItem("items").length;
let winList = [];
let leftImg = $('#img-left');
let leftDcs = $('#img-dsc-left');
let rightImg = $('#img-right');
let rightDcs = $('#img-dsc-right');
winsWorldCupItem=(index)=>{
    winList.push(items[index]);
    idx++;
    if(idx >= worldcupNumber /2){
        worldcupNumber /= 2;
        idx = 0;
        items = winList;
        winList.length = 0;
        items.sort(()=>Math.random() - 0.5);

    }
    if(items.length == 1)
        winGame(items[0]);
    else
        shiftImage(idx);
}
shiftImage=(idx)=>{
    leftImg.attr("src","/image/"+items[idx].id);
    leftDcs.text(items[idx].title);
    leftImg.attr("title",idx);
    rightImg.attr("src","/image/"+items[worldcupNumber-1-idx].id);
    rightDcs.text(items[worldcupNumber-1-idx].title);
    rightImg.attr("title",worldcupNumber-1-idx);
}
winGame=(item)=>{

}
$(window).ready(()=>{shiftImage(0)});

사실 이부분은 테스트를 못했다.

테스트를 하려고 하니 데이터가 필요하고

데이터를 등록하려고 하니 아직 게임 등록 기능이 없다.

간단한 테스트 데이터를 만들수도 있겠지만 그거 만드는 것도 귀찮아.....

그냥 나중에 테스트하고 수정하기로 결정~~

 

그래서 일단 월드컵 등록 페이지부터 만들기로 하였다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="//unpkg.com/bootstrap@4/dist/css/bootstrap.min.css">
    <script src='//unpkg.com/jquery@3/dist/jquery.min.js'></script>
    <script src='//unpkg.com/bootstrap@4/dist/js/bootstrap.min.js'></script>
    <script type="text/javascript" src="/js/worldcup_add.js"></script>
</head>
<body>

  <form id="worldcup-form" class="p-3" onchange="">
      <label for="worldcup-title" class="form-label">월드컵 Title</label>
      <input id="worldcup-title"  name="title" class="form-control">
      <label for="worldcup-dcs" class="form-label">월드컵 설명</label>
      <input id="worldcup-dcs" class="form-control" name="description">
      <input id="file-select" type="file" class="btn btn-outline-primary" value="이미지 파일 선택" accept=".png,.jpg" onchange="selectImageFile()" multiple>
      <div class="container">
          <div class="card col-md-3" id="original" style="display: none">
              <img class="input-img card-img-top" src="">
              <div class="card-body">
              <input class="img-file" type="file" style="display: none" />
              <input class="form-control img-title" type="text" placeholder="이미지 설명...">
              </div>
          </div>
          <div class="row" id="img-list">

          </div>
      </div>
  </form>
</body>
</html>
selectImageFile=(event)=>{
    $('#img-list').empty();
    let fileInput = $('#file-select')[0].files;
    for(let i = 0; i < fileInput.length;i++){
        let clone = $('#original').clone();
        clone.children(".input-img").attr("src",URL.createObjectURL(fileInput[i]));
        clone.children(".img-file").val(fileInput[i]);
        clone.children(".img-file").attr("name","games["+i+"].image");
        clone.children(".img-title").attr("name","games["+i+"].title");
        clone.css("display","");
        $('#img-list').append(clone);
    }
}

아... 파일 업로드....

여러 파일을 선택하고 하나하나 이미지 설명을 달아야 하는구조라서 구현해야할 기능이

1. 버튼늘 누르면 선택한 파일 개개마다 설명 입력 기능

2. 그렇게 추가한 파일이 database에 재대로 입력이 되는지 확인

3. 사용자 정보와 mapping(ModelAttribute를 사용해야하나....)

아직 (1)까지만 구현한 상태....

오늘은 여기까지... 머리를 너무 많이 굴렸다...

'Project > [Spring] 이미지 월드컵 만들기' 카테고리의 다른 글

[Spring] 이미지월드컵 만들기 (마지막) - 메인화면 월드컵 진행 및 결과 화면  (0) 2022.06.02
[Spring]이미지 월드컵 만들기 (6)- 이미지 업로드(2)  (0) 2022.05.24
[Spring]이미지 월드컵 만들기(4) - 기능 설계하기  (1) 2022.05.18
[Spring]이미지 월드컵 만들기(3) - DB Entity 설계하기  (0) 2022.05.18
[Spring]이미지 월드컵 만들기(2) - Database 연결  (0) 2022.05.18
'Project/[Spring] 이미지 월드컵 만들기' Related Articles more