Drag and Drop 파일 업로드 구현

마우스로 파일을 끌어다 놓아서 업로드 하는 방식을 구현하는 방법 입니다.

 

fileDnd.txt

0.00MB

 

주의 할 점은 ajax로 FormData를 만들어서 multipart/form-data를 넘기는 경우에는 UTF-8 인코딩을 사용합니다.

파일명에 한글이 들어갔는데 EUC-KR로 처리되는 사이트는 파일명이 깨질 수 있습니다.

반대로 결과값으로 파일명을 받는 경우 UTF-8이 아닌 경우에는 파일명이 깨집니다.

EUC-KR인 사이트는 DB저장하거나 파일 저장할때만 UTF-8에서 EUC-KR로 변경해서 사용하고

파일목록을 리턴할때는 UTF-8로 넘겨야 합니다.

 

 

추가적으로 소스 파일처럼 new FormData(frm); 식으로 FormData()를 생성할때 기존의 파일 업로드 Form을 넣어주면

Drag and Drop 방식으로 추가한 파일 뿐만 아니라 기존 방식의 file input을 사용한 방식으로 선택된 파일도 같이 전달 됩니다.