사진 업로드

2022.05.03

 

사진 파일 업로드 하는 방법 / 미리보기(사진 띄우기)

 

<input type :'file' > 로 사진, 오디오, 비디오 등을 올릴 수 있다

accept="img/*" 로 이미지 파일만 선택 가능(오디오 비디오도 마찬가지)

multiple 은 여러 파일 선택 가능하게 해줌

 

보통 input 태그에 css 적용이 힘들어서 <button> 과 함께 사용한다

input은 display:'none'을 입히고 버튼 클릭시 input이 클릭 되게 연동해서 UI를 이쁘게 사용 많이 함

<input type="file" style="display: none" id="real-input" class="image_inputType_file" accept="img/*" required multiple>
<button class="browse-btn">사진업로드</button>
<img src="" class="uploadImage">

<script>
    const browseBtn = document.querySelector('.browse-btn');
    const realInput = document.querySelector('#real-input');

    browseBtn.addEventListener('click', () => {
        realInput.click();
    });
    realInput.addEventListener('change', upload);

    function upload() {
        let selectFile = realInput.files[0];
        const file = URL.createObjectURL(selectFile);
        document.querySelector(".uploadImage").src = file;
    }
</script>

그럼 버튼을 누르면 숨겨진 input이 클릭 되어 파일 선택창이 열리게 되고 그림 파일을 선택하면

input이 체인지 되어 upload 함수가 실행됨

 

input에 담긴 파일의 정보는 배열과 딕셔러니 형식으로 담기게 됨.

.files[0] 로 파일의 정보를 가져온다.

URL.createObjectURL(selectFile)로 파일의 url을 가져와서 이미지 div element를 만든다.

(URL.createObjectURL() 정적 메서드는 주어진 객체를 가리키는 URL을 DOMString으로 반환합니다.)

파일의 url를 가져와 img의 src에 넣어주어 표시함

 

 

// 참고

 

https://developer.mozilla.org/ko/docs/Web/API/File/Using_files_from_web_applications#%EC%98%88%EC%8B%9C_%EA%B0%9D%EC%B2%B4_url%EC%9D%84_%EC%82%AC%EC%9A%A9%ED%95%98%EC%97%AC_%EC%9D%B4%EB%AF%B8%EC%A7%80_%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0

웹 어플리케이션에서 파일 사용하기 - Web API | MDN

https://ktsrbr.tistory.com/3

Javascript 이미지 업로드 방법

https://velog.io/@minkyeong-ko/HTMLCSSJS-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%97%85%EB%A1%9C%EB%93%9C-%ED%8C%8C%EC%9D%BC%EC%9D%B4%EB%A6%84-%EB%82%98%ED%83%80%EB%82%B4%EA%B8%B0-%ED%99%94%EB%A9%B4%EC%97%90-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%B3%B4%EC%97%AC%EC%A3%BC%EA%B8%B0

[HTML/CSS/JS] 이미지 업로드 - 화면에 파일 이름과 업로드된 이미지 보여주기