구현
<!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 통신을 이용하여 처리한다
예제로 만나보는 제이쿼리 - 비동기 파일업로드