자바스크립트: 파일을 특정 영역으로 드래그 앤 드롭하기 (라이브러리 없이)

아래 화면처럼 브라우저의 외부 파일 탐색기에서 파일을 드래그 앤 드랍하여 <input type=file>에 파일을 입력받는 방법입니다. 제이쿼리를 사용하면 좋긴한데 여기서는 제이쿼리 없이 작성했습니다. 호환성을 위해 ES5 이하 스펙으로 작성하였습니다.

https://giphy.com/gifs/14jXPppv1Xv7XRnsk5

 

https://gist.github.com/ayaysir/656003f348da640679cea7e0badc0998

• <input type=file>에서 multiple 속성을 추가하면 여러 파일을 입력받을 수 있습니다.
• drop-zone 이라는 클래스의 첫 번째 요소에 파일을 드래그 앤 드랍하면 이벤트가 발생합니다.
• 드래그 앤 드랍 이벤트에서 자주 사용되는 속성은 dragover, drop 입니다. dragover는 드래그한 파일들이 영역 안에 들어가 있을 때, drop은 마우스 버튼을 떼고 드랍되었을 때 발생하는 이벤트입니다.
• 브라우저 기본 동작 방지와 버블링 방지 목적으로 e.preventDefault(), e.stopPropagation()을 추가합니다. (관련 글)
• selectFile 함수에서 input file을 대체하는 작업을 수행합니다. 이 예제는 여러 파일이 허용된다는 전제하에 저렇게 작성되었고, 만약 단일 파일만 허용해야 한다면 방어 코드를 작성해 파일 입력이 되지 않도록 하거나 또는  아래와 같이 첫 번째 파일만 대체되도록 하세요.
  • $file.files[0] = files[0]
• 드랍된 파일이 정상적인 파일인 경우 파일들은 e.dataTransfer.files에 담기게 됩니다.

 

참고 블로그 바로가기