원본 본문으로 이동하기

HTML5 파일 드래그 엔 드롭 감지

박용서 - HTML5 File drag and drop event 원리만 단순하게 작성해보았습니다. <div id="fd" style="width:400px; height:200px; background:#eee;">여기에 파일을 드레그해주세요.</div> <div id="list">업로드 리스트<br/></div> <script type="text/javascript"> var fd = document.getElementById('fd'); var list = document.getElementById('list'); function fdOver(e) { e.stopPropagation(); e.preventDefault(); if (e.type == "dragover") { // 파일 올림 e.target.style.background = '#c00'; } else { // 파일 놓음 [원상복구] e.target.style.background = '#eee'; } } function fdUpload(e) { e.stopPropagation(); e.preventDefault(); fdOver(e); // (e.type != "dragover") 캔슬을위해 [여기서 별도로 작업해줘도 상관없음] var files = e.target.files || e.dataTransfer.files; for (var i = 0 ; i < files.length ; i++) { list.innerHTML = list.innerHTML + (files[i].name).replace(/\<\>/g, '') + '<br/>' } } fd.addEventListener("dragover", fdOver, false); fd.addEventListener("dragleave", fdOver, false); fd.addEventListener("drop", fdUpload, false); </script> - HTML 자바스크립트