드래그앤드롭 drag&drop

2024년 11월 15일

chantleman
작성자
2024.11.15.:12

<h1>수민 만만세2 미리보기</h1>
<div id="mgJS" ondragover="jcOver()" ondrop="jcDrop()"></div>

이미지를 브라우저로 옮겼을때 창 열리는 것 막기

function jcOver(){
    event.preventDefault();
}

function jcDrop(){
    event.preventDefault();
}

window.addEventListener("dragover", jcOver);
window.addEventListener("drop", jcOver);

원래는 이렇게 창이 열리지만 preventDefault로 막았당

사진 드롭

function jcDrop(){
    event.preventDefault();

    mgJS.innerHTML="";
    let jcFiles = event.dataTransfer.files;
    console.log("끌고 온 파일들: ", jcFiles);
    for(let i=0;i<jcFiles.length;i++){
    	let jcFile = jcFiles[i];
        let fileReader = new FileReader(); 				//binary 파일을 읽어주는 객체
        fileReader.readAsDataURL(jcFile);				//비동기나 스레드는 주로 IO(읽기/쓰기) 동작에 쓰임. 크기가 크면 시간이 오래 걸려서!
        fileReader.onload = function(){					//다 읽었으면 함수 실행
            //console.log(fileReader.result);				//읽은 결과가 result 속성에 담겨있음
            let imgTag = document.createElement("img");
            imgTag.src = fileReader.result;				//화면에 표시할 수 있는 base64가 있기 때문에
            imgTag.width= 400;
            imgTag.height= 400;
            mgJS.append(imgTag);						//화면에 표시
        }
    }
}

복잡한 데이터 한번에 보내기

<button onclick="shComplex()">복잡데이터 아작스</button>

function shComplex(){
    let formData = new FormData();

    formData.append("idolName","수민");
    formData.append("idolAge", 99);
    formData.append("idolSajin","/jcmc/떵개.jpg");

    //추가적으로 아래 데이터를 formData에 합쳐서 보내기
    let jcArr = [
        {model: "구루마", name:"소나타"},
        {model: "자전거", name:"빵빵"},
        {model: "도구", name:"망치"},
        {model: "트럭", name:"포터"},
    ]

    formData.append("yjPlus", new Blob([JSON.stringify(jcArr)],{type:"application/json;charset=utf-8"}));  // blob: binary large object

    fetch("/api/shcomplex",{
        method:"post",
        body:formData
    }).then(resp=>{
        resp.text().then(rslt =>{
            console.log("체킁: ", rslt);
        })
    })

}

@RequestPart는 formData가 넘어올때만 사용!
@RequestPart(" formData에 데이터 담을때 사용했던 키 값 ")

@PostMapping("/shcomplex")
public int shcomplex(IdolVO idol, @RequestPart("yjPlus") List<Map<String, String>> jcArr) {
    log.debug("체킁{}",idol);
    log.debug("체킁2{}",jcArr);
    return 337;
}

한번만 받는거면 Map으로 받아도 되지만
여러번 받아야하는 데이터라면 VO로 만들어서 받기

let singers = [
    {name:"장원영", group:"아이브"},
    {name:"카리나", group:"에스파"},
    {name:"오혜원", group:"엔믹스"},
    {name:"손나은", group:"에이핑크"},
]
formData.append("gjPlus", new Blob([JSON.stringify(singers)],{type:"application/json;charset=utf-8"}));

@Getter
@Setter
@ToString
public class SingerVO {
	private String name;
	private String group;
}

@PostMapping("/shcomplex")
public int shcomplex(IdolVO idol, @RequestPart("yjPlus") List<Map<String, String>> jcArr,
                                  @RequestPart("gjPlus") List<SingerVO> singers) {
    log.debug("체킁{}",idol);
    log.debug("체킁2{}",jcArr);
    log.debug("체킁3{}",singers);
    return 337;
}

전체 코드

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#mgJS {
			border: 10px groove gold;
			width: 400px;
			height: 400px;
		}
	</style>
</head>

<body>
	<button onclick="shComplex()">복잡데이터 아작스</button>
	<h1>수민 만만세2 미리보기</h1>
	<div id="mgJS" ondragover="jcOver()" ondrop="jcDrop()"></div>


	<script>
		//아주 가끔은 서버에 여러개가 믹스된 복잡한 데이터를 한번에 보내야하는 경우가 발생 !
		function shComplex(){
			let formData = new FormData();

			/*
			let idol = {
				idolName:"수민",
				idolAge:99,
				idolSajin:"/jcmc/떵개.jpg"	//억지로 파일이라고 가정
			}
			*/

			formData.append("idolName","수민");
			formData.append("idolAge", 99);
			formData.append("idolSajin","/jcmc/떵개.jpg");

			//추가적으로 아래와 같은 데이터를 formData에 합쳐서 보내고싶당. 
			let jcArr = [
				{model: "구루마", name:"소나타"},
				{model: "자전거", name:"빵빵"},
				{model: "도구", name:"망치"},
				{model: "트럭", name:"포터"},
			]

			
			//formData.append("yjPlus", JSON.stringify(jcArr));  //안타깝지만 이렇게는 추가할 수 없음
			formData.append("yjPlus", new Blob([JSON.stringify(jcArr)],{type:"application/json;charset=utf-8"}));  // blob: binary large object

			let singers = [
				{name:"장원영", group:"아이브", songs:["love dive"]},
				{name:"카리나", group:"에스파", songs:["next level", "up"]},
				{name:"오혜원", group:"엔믹스", songs:["null 미워해", "null 사랑해"]},
				{name:"로제", group:"블랙핑크", songs:["apt", "gone"]},
			]
			formData.append("gjPlus", new Blob([JSON.stringify(singers)],{type:"application/json;charset=utf-8"}));

			fetch("/api/shcomplex",{
				method:"post",
				body:formData
			}).then(resp=>{
				resp.text().then(rslt =>{
					console.log("체킁: ", rslt);
				})
			})

		}


		const mgJS = document.querySelector("#mgJS");


		// 파일 1개씩만 읽는 함수를 별도로 만들면 비동기 충돌 상황을 피할 수 있음
		function jyReadOneFile(jcFile) {
			var fileReader = new FileReader(); 				//binary 파일을 읽어주는 객체
			fileReader.readAsDataURL(jcFile);				//비동기나 스레드는 주로 IO(읽기/쓰기) 동작에 쓰임. 크기가 크면 시간이 오래 걸려서!
			fileReader.onload = function () {					//다 읽었으면 함수 실행
				//console.log(fileReader.result);				//읽은 결과가 result 속성에 담겨있음

				var imgTag = document.createElement("img");
				imgTag.src = fileReader.result;					//화면에 표시할 수 있는 base64가 있기 때문에
				imgTag.width = 400;
				imgTag.height = 400;
				mgJS.append(imgTag);							//화면에 표시
			}
		}

		function jcDrop() {
			event.preventDefault();

			mgJS.innerHTML = "";
			let jcFiles = event.dataTransfer.files;
			console.log("끌고 온 파일들: ", jcFiles);

			for (var i = 0; i < jcFiles.length; i++) {
				var jcFile = jcFiles[i];
				jyReadOneFile(jcFile);
			}
		}

		//div 태그 밖도 막아야해서 window로
		window.addEventListener("dragover", jcOver);
		window.addEventListener("drop", jcOver);

		function jcOver() {
			event.preventDefault();
		}

</script>
</body>
</html>

728x90

'js' 카테고리의 다른 글

apexchart 사용하기 (1)	2025.01.03
.onload 와 .ready() (0)	2024.11.24
eclipse에서 vscode 열기 (0)	2024.11.11
모달 (0)	2024.11.04
json parse (2)	2024.10.31

다음 글이 없습니다.

이전 글이 없습니다.