drag and drop.drawio.png

Controller

 // 커버 이미지 파일 저장 
	    @RequestMapping(value = "/coverImageUpload.do", method = RequestMethod.POST)
	    @ResponseBody
	    public String coverImageUpload(@RequestParam("coverImage") MultipartFile file) throws Exception {
	        if (file.isEmpty()) {
	            return "fail";
	        }
	        try {
	        	// 새 글 번호 가져오기
	    	    int newArticle = myhomeService.selectNewMyHomeNO();
	    	    System.out.println("이미지 폴더 명에 넣을 새글 번호 : " + newArticle);
	    	    
	    	    String result = myhomeService.coverImageUpload(newArticle, file);

	            return result;
	        } catch (Exception e) {
	            return "fail";
	        }
	    }

Service

@Override
	public String coverImageUpload(int newArticle, MultipartFile file) throws Exception {
		 try {
	    // 파일 저장 경로 설정
	    String uploadDir = "C:\\\\gami\\\\board\\\\board_myhome\\\\coverImage\\\\" + newArticle;
	    File directory = new File(uploadDir);

	    // 폴더가 존재하지 않으면 자동으로 생성
	    if (!directory.exists()) {
	        directory.mkdirs();
	    }

	    // 파일 이름 가져오기
	    String fileName = file.getOriginalFilename();
	    File saveFile = new File(directory, fileName);

	    file.transferTo(saveFile); // 파일 저장

        // 파일 경로 DB 저장
        String filePath = saveFile.getAbsolutePath();
        myhomeDAO.CoverImagePath(newArticle, fileName);

        return "success";
	    } catch (IOException e) {
	        e.printStackTrace();
	        return "fail";
	    }

DAO

	@Override
	public void CoverImagePath(int newArticle, String fileName) {
        Map<String, Object> imageMap = new HashMap<>();
        imageMap.put("articleNo", newArticle);
        imageMap.put("imageFilename", fileName);       
                
        try {
        	// DB에 이미 존재하는 아티클 넘버인지 확인
        	int countArticleNo = sqlSession.selectOne("mapper.board.coverImageArticleNo", imageMap);
        	
        	if(countArticleNo == 0) { 
	        	sqlSession.insert("mapper.board.coverImagePath", imageMap);
	            System.out.println("insert성공 " + fileName);
        	} else { 
        		sqlSession.update("mapper.board.coverImageSamePath", imageMap); 
        		System.out.println("update성공 " + fileName);
        	}
        	
        }catch (Exception e) {
            e.printStackTrace();  
        }
    }

mapper

	<!-- 이미지 아티클넘버 조회용 -->
	<select id="coverImageArticleNo" resultType="int"  >
		<![CDATA[
			SELECT count(#{articleNo}) 
			FROM image 
			WHERE articleNo = #{articleNo} and imagetype = '커버'
		]]>
	</select>
	<!-- 커버이미지 경로 저장 -->
    <insert id="coverImagePath" parameterType="map">
	    <![CDATA[
	        INSERT INTO image (imageNo, articleNo, imageFilename, imageUpdated, imageType)
	        			VALUES (image_seq.NEXTVAL, #{articleNo}, #{imageFilename}, SYSDATE, '커버')
	    ]]>
	</insert>
	<!-- 커버이미지 경로 업데이트(같은 아티클 넘버가 존재할 때) -->
	<update id="coverImageSamePath"  parameterType="map">
		<![CDATA[
			UPDATE image 
			SET imageFilename = #{imageFilename} 
			WHERE articleNo = #{articleNo} and imagetype = '커버'
		]]>
	</update>

myHomeForm.jsp

<script>
document.addEventListener("DOMContentLoaded", function () {
    var dropZone = document.getElementById("dropZone");
    var previewContainer = document.getElementById("previewContainer");

    dropZone.addEventListener("dragover", function (event) { // 드래그 중일때 이벤트
        event.preventDefault(); // 기본동작 방지
        dropZone.classList.add("dragover");
    });

    dropZone.addEventListener("dragleave", function () { // dragzone 벗어났을 때 이벤트
        dropZone.classList.remove("dragover");
    });

    dropZone.addEventListener("drop", function (event) { // drop이벤트
        event.preventDefault();
        dropZone.classList.remove("dragover");

        var files = event.dataTransfer.files;
        handleFile(files[0]); // 파일 하나만 업로드 가능하도록 제한
        
        // 파일을 FormData에 추가하여 서버로 전송
        var formData = new FormData();
        formData.append("coverImage", files[0]); // 드래그 앤 드롭된 파일
        
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            processData: false,
            contentType: false,
            url: "/gami/board/board_myhome/coverImageUpload.do",  // 파일 업로드를 처리할 URL
            data: formData,
            success: function(response) {
                console.log(response); 
                if (response === "success") {
                    alert("파일이 성공적으로 업로드되었습니다.");
                } else {
                    alert("파일 업로드 중 오류가 발생했습니다.");
                }
            }
        });
    });

    function handleFile(file) {
        if (!file.type.startsWith("image/")) { // 파일의 MIME타입이 image인지 확인
            alert("이미지 파일만 업로드 가능합니다!");
            return;
        }

        previewContainer.innerHTML = "";  // 기존 미리보기 삭제

        var reader = new FileReader(); //FileReader:파일 읽는 API
        reader.onload = function (e) {
            var img = document.createElement("img");
            img.src = e.target.result; // 읽어온 파일의 url
            previewContainer.appendChild(img); // 미리보기에 이미지 삽입
        };
        reader.readAsDataURL(file);
    }
});
</script>