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

Front-End/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 통신을 이용하여 처리한다

'Front-End > jQuery' 카테고리의 다른 글

[jQuery]jQuery의 ajax - 단축 메서드와 jqXHR객체 (0)	2018.07.17
[jQuery] jQuery의 ajax - 저수준 인터페이스 메서드 (0)	2018.07.17
[jQuery] 다른 어플 텍스트 드랍앤 드롭 (0)	2017.01.12
[jQuery] 드래그 & 드랍 구현 - on()[이벤트리스너] (0)	2017.01.12
[jQuery] 이벤트 리스너에 매개변수 전달 (0)	2017.01.06

리딩리드

일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31