[백업][가리사니] html5 파일 드래그 엔 드롭 감지
html, javascript
이 문서는 가리사니 개발자 포럼에 올렸던 글의 백업 파일입니다. 오래된 문서가 많아 현재 상황과 맞지 않을 수 있습니다.
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>