htm에 파일을 드래그앤 드랍을 하여 파일을 업로드 하는 것을 그렇게 어려운 일은 아니다. 그래도 해당 기능이 있으면 꽤나 편한 기능이기에 방식을 소개하면서 해당 코드를 공유 하고자 작성 한다. 여기서 신경써야 하는 이벤트는 두가지 있다. drop이벤트와 dragover이벤트이다. drop이벤트는 딱보아도, 해당영역에 무언가 떨어졌을 때이다 드랍쉽을 생각하면 된다. 당연하게도 drop이벤트에서 파일을 확인 할 수 있게 된다. 자 그러면 dragover는 왜 확인해야 할까? drop 이벤트도 그렇지만 dragover의 이벤트의 파일 끌기의 브라우저 기본기능이 일반적으로 파일을 오픈하는 행위라서이다. 간단하게만 생각하면 파일을 놓는 순간 파일이 다운로드 될테이다. drop의 기본기능만 껏다가는 계속 파일을 다운로드 받게 될 것이다. 자 아래의 코드들을 확인하자. 특이점은 세가지정도로 분류 할 수 있다. 1. html(루트 엘리먼트) 에 이벤트 리스너. 2. drop-zone이 label이면서 input[type=file]태그 3. drop-zone에 drop과 dragover를 제외한 이벤트 리스터들. 아래는 해석이다. 1. html(루트 엘리먼트) 에 이벤트 리스너. 난 드래그앤 드랍 파일기능을 제공 하는 사이트들에서 꽤 불편하게 느꼇던 것이 뚱뚱한 손가락 오류 였다. 조금만 빗나가면 수많은 파일들이 다운로드 받아졌다. 따라서 기본기능을 제거하기위해 루트엘리먼트에도 이벤트리스너를 달았다. 2. drop-zone이 label이면서 file태그 파일 드래그앤 드랍만 제공할 경우 꽤나 불편한 상황이 올것이다. 특히나 모니터를 여러대 사용하거나 멀티윈도우를 사용하는 경우엔... 그래서 drop 영역을 클릭시 input type="file"이 해당 이벤트를 받을 수 있도록 영역을 라벨로 처리 하였다. 참고로 input type="file"은 display none을 ...