자바스크립트를 이용한 프로필 추가 기능 구현

자바스크립트를 이용하여 html에서 이미지첨부를 할 수 있는 기능이다.

 

구현한 기능

이미지는 선택사항입니다. 라는 글을 선택 시 이미지를 선택할 수 있는 창이 뜹니다.

이미지 선택후 확인을 누르면 아래의 검은색 상자에 선택한 이미지가 들어갑니다.

 

 

HTML구조

    <div>
    <form class="img_upload_box" method="post" enctype="multipart/form-data">
        <div class="preview">
            <p class="img_upload_area"></p>
        </div>
        <div>
            <div>
                <input type="file" id="image_uploads" name="image_uploads" accept=".jpg, .jpeg, .png" multiple>
                <p class="img_upload_text"><label for="image_uploads">이미지는 선택사항입니다. (PNG, JPG)</label></p>
            </div>
            <div class="recommend_name_box">
                <input class="recommend_name" type="text">
            </div>
        </div>
    </form>
    </div>

 

 

 

CSS 구조

.img_upload_box{
    margin: 0px 50px;
}

.img_upload_text{
    text-align: center;
    margin: 3px 0px;
}
form li{
    background:  #f5efe8;
    border: solid 2px #e0dbd4;
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}
form img{
    height: 60px;
    width: 60px;
    object-fit: contain;
    order: 1;
}

.img_upload_box{
    display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    padding: 20px 70px;
    margin: 0px;
}

.img_upload_area{
    width: 60px;
    height: 60px;
    margin-right: 10px;
    background-color: black;
}

.preview > ol{
    margin-right: 10px;
    padding: 0px;
}

 

 

자바스크립트 구조

var input = document.querySelector('#image_uploads');
var preview = document.querySelector('.preview');

input.style.opacity = 0;
input.style.height = 0;

input.addEventListener('change', updateImageDisplay);

function updateImageDisplay() {
    while(preview.firstChild) {
        preview.removeChild(preview.firstChild);
    }

    const curFiles = input.files;
    if(curFiles.length === 0) {
        const para = document.createElement('p');
        para.textContent = '';
        preview.appendChild(para);
    } else {
        const list = document.createElement('ol');
        preview.appendChild(list);

        for(const file of curFiles) {
        const listItem = document.createElement('li');
            if(validFileType(file)) {
                const image = document.createElement('img');
                image.src = URL.createObjectURL(file);

                listItem.appendChild(image);
            } 
        list.appendChild(listItem);
        }
    }
}

const fileTypes = [
    "image/apng",
    "image/bmp",
    "image/gif",
    "image/jpeg",
    "image/pjpeg",
    "image/png",
    "image/svg+xml",
    "image/tiff",
    "image/webp",
    "image/x-icon"
    ];

function validFileType(file) {
    return fileTypes.includes(file.type);
}

function returnFileSize(number) {
    if(number < 1024) {
        return number + 'bytes';
    } else if(number >= 1024 && number < 1048576) {
        return (number/1024).toFixed(1) + 'KB';
    } else if(number >= 1048576) {
        return (number/1048576).toFixed(1) + 'MB';
    }
}

 

 

 

결과물