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