Drag & Drop으로 파일 업로드하기

attribute와 property의 차이를 알아야 한다.

YI Eun Gook
1 min readSep 11, 2018

먼저 부제목대로 attribute와 property의 차이를 알아야 한다. 좋은 글을 읽고 오자.
HTML : attribute와 property 의 차이

그리고 Drag & Drop에 필요한 ondragover 이벤트ondrop 이벤트도 간단히 보고 오자.

끝으로 ondrop 이벤트에서 주어지는 event의 dataTransfer 객체를 알면 준비 완료다.

아주 간단하게 구현해 보았습니다. 원래대로라면 files/items 사이의 선택이나 length도 생각해야겠죠

파일을 Drag & Drop할 때마다 <input type="file">을 append 한다.

포인트는 #24와 #25다. type은 attribute고, files는 property라는거다. 이걸 구분할 수 있어야 한다.

그밖의 #16, #20의 preventDefault()도 꼭 필요함

준비가 되면 submit 시키면 될 것 같다.

--

--

No responses yet