[drag & drop] HTML5의 drag & drop API 이용하기
html5의 drag & drop API를 이용하여 브라우저에 파일을 떨어뜨리는 예제입니다.
브라우저와 떨어뜨릴 사진을 준비합니다.
브라우저에 콘솔로그를 확인하기 위해서 inspector(요소검사)창을 엽니다.
(브라우저에서 마우스 오르쪽 클릭 > 요소검사)
사진파일을 브라우저로 드래그 하면 콘솔창에 상태가 표시됩니다.
사진을 브라우저 밖으로 빼면 역시 콘솔에 이벤트가 발생합니다.
사진을 브라우저에 떨어뜨리면 사진이 표시됩니다.
(까메오 출연해주신 아드님께 감사~^^)
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <img id="imgEl" src="" alt=""> <p>사진을 브라우저 내부로 드래그 해보세요.</p> <script type="text/javascript"> // 사진을 브라우저 안으로 드래그 window.addEventListener("dragenter", function(){ console.log("dragenter"); }, false); // 사진이 브라우저 위에 있음 window.addEventListener("dragover", function(){ console.log("dragover"); }, false); // 사진을 브라우저 밖으로 드래그 window.addEventListener("dragleave", function(e){ console.log("dragleave"); }, false); // 사진을 브라우저 위에 드롭 window.addEventListener("drop", function(e){ e.preventDefault(); var file = e.dataTransfer.files[0], reader = new FileReader(); reader.onload = function (event) { document.querySelector("#imgEl").setAttribute("src", event.target.result); }; reader.readAsDataURL(file); }, false); </script> </body> </html>
댓글