jquery - 외부 파일 드래그 드롭 구현

구현

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

외부 파일 드래그 드롭 구현

단축키

Articles