Dropzonejs를 이용한 Drag & Drop 파일 업로드 구현
Dropzonejs를 이용해 Drag & Drop 파일 업로드 기능을 구현했다. form 페이지에서 업로드 이미지를 추가하고 submit 버튼을 클릭했을 때 서버로 이미지 파일이 업로드되도록 했고 추가된 이미지 파일을 삭제했을 때 서버에 저장된 이미지도 삭제되도록 기능을 구현했다. 스크립트 코드 중 일부는 jQuery를 이용하기 때문에 함께 로드되어야 한다.
<form name="fname"> <label for="fld">필드</label> <input type="text" name="fld" id="fld" value=""> <div class="dropzone" id="fileDropzone"></div> </form>
form은 위와 같이 추가적인 input 필드와 dropzone이 포함되어 있다. Dropzonejs 사용을 위해 스크립트 파일을 로드한다.
<script src="./js/dropzone.js"></script>