Javascript 드래그 앤 드롭 및 클릭으로 이미지 업로드 (1/2)

 

드래그 앤 드롭과 버튼 클릭 방식을 병합한 이미지 업로드 기능을 구현해보자.

 

HTML 작성

• <div class="drag-area"> 드래그 앤 드롭 영역
• class="material-symbols-outlined"로 구글폰트에서 icon 가져오기
• 클릭시 저장된 파일을 불러올 수 있도록 button 추가
• input 태그로 file을 받아올 수 있도록 설정

<!-- HTML -->
<div class="drag-area">
    <span class="material-symbols-outlined" style="font-size: 50px;">add_photo_alternate</span>
    <header>드래그 하여 이미지 업로드</header>
    <span>또는</span>
    <button>컴퓨터에서 선택</button>
    <input type="file" hidden>
</div>

 

CSS 작성

• CSS는 임의로 수정하세요.
• drag-area.active 는 파일을 박스 안으로 드래그하면 활성화 상태임을 표시해줌

/* CSS */

.drag-area {
    border: 2px dashed #fff;
    height: 500px;
    width: 700px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.drag-area.active {
    border: 2px solid #fff;
}

.drag-area .icon {
    font-size: 100px;
    color: #fff;
}

.drag-area header {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
}

.drag-area span {
    font-size: 25px;
    font-weight: 500;
    color: #fff;
    margin: 10px 0 15px 0;
}

.drag-area button {
    padding: 10px 25px;
    font-size: 20px;
    font-weight: 500;
    border: none;
    outline: none;
    background: #fff;
    color: #5256ad;
    border-radius: 5px;
    cursor: pointer;
}

.drag-area img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 5px;
}

 

Javascripts 부분은 다음에..