로메오의 블로그

input file 이미지 미리보기 구현 본문

Design/Markup

input file 이미지 미리보기 구현

romeoh 2021. 11. 9. 16:31
반응형

단일파일 미리보기

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>

<h2>단일파일 처리</h2>
<img style="width: 500px;" id="previewImage" src="https://dummyimage.com/300x100/ffffff/000000.png&text=file upload">
<input style="display: block;" type="file" id="inputImage">

<script type="text/javascript">
/**
 * 단일파일 업로드
 */
function readImage(input) {
    if (input.files && input.files[0]) {
        const reader = new FileReader();
        
        reader.onload = (e) => {
            const previewImage = document.getElementById('previewImage');
            previewImage.src = e.target.result;
        }
        reader.readAsDataURL(input.files[0]);
    }
}
// 이벤트 리스너
document.getElementById('inputImage').addEventListener('change', (e) => {
    readImage(e.target);
})
</script>
</body>
</html>

 

멀티파일 미리보기

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#multipleContainer {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.image {
    display: block;
    width: 100%;
}
.image-label {
    position: relative;
    bottom: 22px;
    left: 5px;
    color: white;
    text-shadow: 2px 2px 2px black;
}
</style>
</head>
<body>

<h2>멀티파일 처리</h2>
<input style="display: block;" type="file" id="inputMultipleImage" multiple>
<div id="multipleContainer"></div>

<script type="text/javascript">
/**
 * 멀티파일 업로드
 */
function readMultipleImage(input) {
    const multipleContainer = document.getElementById('multipleContainer')
    
    if(input.files) {
        console.log(input.files)
        const fileArr = Array.from(input.files)
        const $colDiv1 = document.createElement('div')
        const $colDiv2 = document.createElement('div')
        $colDiv1.classList.add('column')
        $colDiv2.classList.add('column')
        fileArr.forEach((file, index) => {
            const reader = new FileReader()
            const $imgDiv = document.createElement('div')   
            const $img = document.createElement('img')
            $img.classList.add('image')
            const $label = document.createElement('label')
            $label.classList.add('image-label')
            $label.textContent = file.name
            $imgDiv.appendChild($img)
            $imgDiv.appendChild($label)
            reader.onload = e => {
                $img.src = e.target.result
                
                //$imgDiv.style.width = ($img.naturalWidth) * 0.2 + "px"
                //$imgDiv.style.height = ($img.naturalHeight) * 0.2 + "px"
            }
            
            console.log(file.name)
            if(index % 2 == 0) {
                $colDiv1.appendChild($imgDiv)
            } else {
                $colDiv2.appendChild($imgDiv)
            }
            
            reader.readAsDataURL(file)
        })
        multipleContainer.appendChild($colDiv1)
        multipleContainer.appendChild($colDiv2)
    }
}
// 이벤트 리스너
document.getElementById('inputMultipleImage').addEventListener('change', (e) => {
    readMultipleImage(e.target);
})
</script>
</body>
</html>

 

 

Ajax 파일 업로드: https://romeoh.tistory.com/entry/jQuery-ajax%EB%A1%9C-form-data-%ED%8C%8C%EC%9D%BC-%EC%97%85%EB%A1%9C%EB%93%9C-multipart

 

 

코드 참조: http://yoonbumtae.com/?p=3304

반응형

'Design > Markup' 카테고리의 다른 글

SVG 폰트 만들기  (0) 2022.03.23
Figma에서 Font Awesome 적용하기  (2) 2022.03.17
[Gimp] 사각형 그리기  (0) 2021.12.21
Apple 홈페이지 스크롤 애니메이션 [ScrollMagic ]  (0) 2021.10.28
[Adobe Photoshop] 한글판을 영문판으로 변경  (0) 2020.01.22
'Design/Markup' Related Articles more
Comments