메뉴 건너뛰기

조회 수 1678 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부

구현

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





List of Articles
번호 제목 날짜 조회 수
139 간단한 스크롤 따라 움직이는 메뉴 만들기 2021.03.26 725
138 JS 타이머 샘플 2019.06.04 745
137 체크박스 전체선택/해지 2019.06.04 780
136 새창(자식창) 제어하기, 새창 POST방식으로 값 넘기기 2021.03.26 785
135 JS 날짜 자료 비교 2019.06.04 787
134 DateTimepicker ( Timepicker + Datepicker ) file 2021.03.26 788
133 //ex)텍스트 박스 포커스 활성, 비활성 이벤트 2019.06.04 812
132 click event scroll 2021.03.31 827
131 정규식, 한글 못쓰게 하기, replace all 2021.03.26 842
130 jQuery 일반적 팁 2019.06.04 853
129 텍스트 필드에 기본글이 마우스 클릭하면 지워지게 하기 폼필드 소스 내에 아래 태그를 삽입한다. 2019.06.04 867
128 jQuery 로 탭메뉴 2019.01.10 938
127 .attr() : 태그의 속성 값을 읽어오거나 속성을 추가및 재설정 2019.01.16 962
126 이미지 확대/축소 2020.11.25 972
125 .removeAttr() : 특정 속성을 제거 2019.01.16 1021
124 jQuery 로 원하는 갯수만큼 checkbox 선택하기 2019.01.10 1022
123 jQuery 기초 (JQuery - text(), val(), html(), attr(), prop()) 2019.01.16 1055
122 jQuery 기초 (Query link url / download (위치, 사용법) // p태그, id, class 접근 / 일반태그 가져오기 / 클릭시 값) 2019.01.16 1079
121 jQuery 기초 ((문자열 추가 .before / .after) (문자열 삭제 .remove / .empty) file 2019.01.16 1084
120 jQuery 로 해보는 체크박스(checkbox) 전체선택, 선택해제 예제 2019.01.10 1085
Board Pagination Prev 1 2 3 4 5 6 7 8 9 Next
/ 9

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved