프로젝트 생성 메뉴 수정

[eunja511005]

이미지 업로드 기능 추가

[eunja511005]

이미지 업로그 기능 추가 jsp

<div class="form-group mb-3">
    <label for="image">프로젝트 이미지</label>
    <div id="dragDropArea" class="drag-drop-area" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)" ondrop="handleFileDrop(event)">
        <span class="drag-drop-message">이미지를 드래그 앤 드롭하세요</span>
        <span class="or-text">또는</span>
        <input type="file" class="form-control-file" id="image" name="image" accept="image/*" onchange="previewImage(event)">
    </div>
</div>
<div class="form-group mb-3">
    <div id="imagePreview"></div>
</div>

[eunja511005]

이미지 미리 보기 js

$(document).ready(function() {

    // 이미지 선택 시 미리 보기 호출
    $('#image').on('change', function(event) {
        previewImage(event);
    });

.
.
.

// 이미지 미리 보기 함수
function previewImage(event) {
    var input = event.target;
    var preview = document.getElementById("imagePreview");

    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function(e) {
            preview.innerHTML = '<img src="' + e.target.result + '" alt="Preview Image" class="img-fluid">';
        }

        reader.readAsDataURL(input.files[0]);
    } else {
        preview.innerHTML = '';
    }
}

[eunja511005]

드래그앤드롭을 통한 이미지 업로드를 위한 js

function handleDragOver(event) {
    event.preventDefault();
    event.stopPropagation();
    document.getElementById("dragDropArea").classList.add("drag-drop-over");
    document.querySelector(".drag-drop-message").textContent = "이미지를 여기에 놓아 업로드하세요";
}

function handleDragLeave(event) {
    event.preventDefault();
    event.stopPropagation();
    document.getElementById("dragDropArea").classList.remove("drag-drop-over");
    document.querySelector(".drag-drop-message").textContent = "이미지를 드래그 앤 드롭하세요";
}

function handleFileDrop(event) {
    event.preventDefault();
    event.stopPropagation();
    var files = event.dataTransfer.files;
    var input = document.getElementById("image");

    if (files.length > 0) {
        input.files = files;
        previewImage({ target: input });
    }
    document.getElementById("dragDropArea").classList.remove("drag-drop-over");
    document.querySelector(".drag-drop-message").textContent = "이미지를 드래그 앤 드롭하세요";
}

[eunja511005]

드래그앤드롭을 위한 스타일 : 테두리 영역을 점선 보드로 표시해 주고 마우스 오버시 파란색으로 테두리 변경

<style>
    .drag-drop-area {
        border: 2px dashed #ddd;
        padding: 20px;
        text-align: center;
        transition: border-color 0.3s;
    }

    .drag-drop-over {
        border-color: #007bff;
    }
</style>

[eunja511005]

줄바꿈 위한 스타일 : display: block; 속성은 요소를 블록 레벨 요소로 표시하도록 지정합니다. 블록 레벨 요소는 항상 새로운 줄에서 시작하며, 가능한 가로 폭 전체를 차지합니다.

<style>
    .drag-drop-message {
        display: block;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .or-text {
        display: block;
        font-size: 14px;
        margin-bottom: 10px;
    }

</style>

[eunja511005]

/Tutorial/src/main/resources/static/js/main/content/userManage.js 참고 해서 파일 업로그 구현

• [중요] 파일전송을 위해서는 callAjax() 공통 펑션을 이용 하면 안됨.
• [중요] ajax 호출시 json 형태가 아니라 멀티폼 형태로 전송 되도록해야 파이 전송 가능

      contentType: false,
      processData: false,

  

[eunja511005]

main.js 펑션 호출 하여 압축

---

[eunja511005]

[중요] jsp 파일에서 form에서 name을 file로 주면 Controller에서 RequestParam을 file로 받아야 한다.

---

[eunja511005]

멀티폼으로 받을때는 @ResponseBody를 붙여 주면 UTF-8 인코딩 오류 발생 한다. 따라서 @ResponseBody를 제거해서 json 형태로 받지 않도록 하면되는데 그러면 날짜를 자동으로 변환해 주지 못하므로 @DateTimeFormat 어노테이션을 DTO 날짜 데이터에 붙이면 자동 변환해 준다.

---

[eunja511005]

fileUtil을 이용하여 파일을 저장하고 리턴값으로 받은 path를 DTO에 set 해주면 끝

[eunja511005]

테이블 필드 추가

ALTER TABLE zthh_project
ADD picture VARCHAR2(500);

[eunja511005]

맵퍼 변경

---

[eunja511005]

preview는 jQuery 객체이므로 .innerHTML을 사용할 수 없습니다. 대신 .html() 함수를 사용하여 HTML 내용을 설정

[eunja511005]

입력/수정 페이지를 하나의 jsp로 구현하기 위해 project 응답값의 여부를 체크하도록 기존에 구현 이미지도 있으면 미리보기에 보여 주고 없으면 안보여 주도록 구현하기 위해 일단 jsp 페이지에서 이미지를 받아 와야 함

---

[eunja511005]

프로젝트 리스트에서 조회 될수 있도록 맵퍼 수정

[eunja511005]

프로젝트 리스트에서 카드 그려 줄때 이미지도 추가