[jQuery] 외부 파일 드래그 드롭 구현

Front-End/jQuery

[jQuery] 외부 파일 드래그 드롭 구현

리딩리드 2017. 1. 12. 19:54

외부 파일 드래그 드롭 구현

1. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Title</title> <style> .drop { width: 300px; height:300px; border: 1px solid black; } </style> </head> <hr> <div class="drop" id="drop"> <img id="dropped"/> </div> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('#drop').on({ 'drop':function(e){ var f=e.originalEvent.dataTransfer.files[0]; var reader = new FileReader(); $(reader).on('load',function(){ $('#dropped').attr('src',reader.result); }); reader.readAsDataURL(f); e.preventDefault(); }, 'dragover':function(e){ e.preventDefault(); } }) }); </script>

1) e.originalEvent.dataTransfer.files[0]

- 드롭된 파일(file객체) 접근한다

2) FileReader

- 파일을 읽는 객체를 경유하여 단지 <img> 속성에 이미지를 넣는다

- 업로드 처리는 $.post 같은 ajax 통신을 이용하여 처리한다