[JQuery] 드래그 앤 드롭 - 파일정보가 하나만 간다?? Drag & Drop

 

참. 이거 오랜만에 쓰네요.

지금까지는 일하기만 바빠서 뭐 이런거 기록하는 일도 없었는데..

그래도 이번에는 조금 시간적 여유가 있어서 다시!!

내가 애먹은건 기록을 좀 하자.. 싶은마음에!

서명 폰트도 새로 다운받아서 맞추고 ㅋㅋㅋ

 

아무튼 합니다.

 

 

회의때는 파일 올리는거 드래그 앤 드롭 으로 하면된다고.

별거 아니라고.

꼭 자기가 할것처럼 자신만만하게 별의별 소리를 다 하던 

우리 퍼블리셔.

근데 막상 작업때가되니....

 

 

 

 

" 파일 올리는 부분은 div로 꾸며놓기만 하면 되죠?? "

" 파일 올리는 부분은 div로 꾸며놓기만 하면 되죠?? "

" 파일 올리는 부분은 div로 꾸며놓기만 하면 되죠?? "

" 파일 올리는 부분은 div로 꾸며놓기만 하면 되죠?? "

 

 

 

@!#@*$(_)ㅖ러ㅏㄹ($^&ㅎ으허)#$)ㄴ마ㅓㅑㅕ#ㅁ)ㄲ!!@ㄸ#!$#@

본인이 할것처럼 자신만만하게 별거아니라고 선언을 하길래

아.. 그래도 해본적있고, 자기가 할 마음이 있구나.. 하고!

나름 대견하게 생각했는데.

이게 뭐야?

이야기를 해보니 본인은 해본적도 없고, 할줄도 모른다.

후....

 

 

어쩌겠습니까.

해야지.

담부터 저딴식이면 안해준다.

 

암튼 라이브러리 찾아서 한번 해 봅니다.

의외로 잘 됩니다.

라이브러리 올려주신분들... 진짜 감사할뿐이죠 ㅎㅎㅎㅎ

 

file을 이용해서 복수의 파일을 집어넣는 방식인데요.

설명을 해주신 블로그 글을 여러번 봐도 아래처럼 되어있습니다.

 

 

 

html 쪽은 별거 없습니다.

div에 아이디 지정만 되어있구요.

드롭 동작이 있을때 파일을 받아서 표시하고, 폼데이터에 추가를 하는 방식입니다.

 

뭐가 이것저것 참 많은데요.

참고로 한 블로그의 게시글은 2018년 작성글이었습니다.

그래도 그나마 좀 제가 보기에 알기쉬워서 참고를 했는데요.

files 라는 이름으로 복수의 파일을 추가합니다.

 

 

그런데..???

2개의 파일을 테스트해보니...

자꾸만 하나만 들어간다???

 

왜??

 

 

 

이상하다싶으면 바로... 출력을 해 봐야죠.

ajax로 전달하는 파일을 출력해 봅니다.

분명히 2개의 파일이 전달되고 있음이 나옵니다.

 

 

 

ajax로 받은 파일에서 $_FILES로 어떤 파일들이 전달되는지를 한번 봅니다.

자... 어떤 파일이 들어있는지 볼까요?

 

 

 

WOW!!!!!!!!

분명히 jquery 측에서 건네는 파일은 2개였습니다.

확인 되었는데...

파일을 받은 php 에서는 하나만 받아집니다.

???

 

두개를 던졌는데 받은건 하나.

그럼 하나는 어떤놈이 가져갔냐?????

 

2개의 파일을 POST로 던졌는데...

POST로 받으면 하나...

도대체 뭐가 문제지????

 

설명을 해 놓은 글을 보고보고보고 또보고..

아무리 생각해도 답이 안나옵니다.

그래서 그냥 이렇게 한번 해 봅니다.

 

 

 

우리가 같은 이름으로 여러 값을 받아서 넘길때 이름에 배열식으로 지정하잖아요?

그래서 혹시나 하는 마음에 저렇게 해 봤습니다.

그랬더니???

 

 

 

오잉!!!

두개를 제대로 받아냅니다 ㅎㅎㅎㅎ

 

버전이 올라가면서 뭔가 변경된것도 있겠죠.

2018년에는 저렇게 files라는 이름으로 복수의 파일을 넘길수 있었을지 모르겠지만

지금은 안됩니다.

 

아니지, 버전에 따라 다를까요?

아무튼 JQuery 를 이용해 드래그 앤 드롭 처리는 성공했습니다.

덤으로, 파일이름이 보이고, 삭제도 할수있고...(이부분은 라이브러리에서.. 다시한번 감사감사!! ㅎㅎ )

 

여기에 제가 따로 추가로.

Drag & Drop 뿐만 아니라 클릭시에는 파일창이 열려서

Multiple로 여러개를 올리거나 하나만 올릴수도 있게 했습니다.

 

 

역시 해결이 되고, 움직이면 이보다 재밌을수없다!!!!! ㅋㅋㅋㅋ