input 태그에서 선택한 이미지를 화면에 바로 출력하도록 해보자. Show 코드
input 태그에서 onchange 속성에 실행될 메소드를 정해줍니다. 메소드 내에서 FileReader 객체를 생성하고 onload 됐을 시 발생할 이벤트를 작성해줍니다. 리더에서 input 태그에서 선택한 파일을 읽어오도록 설정합니다. 실행 화면여러 이미지 미리보기
input 태그에 multiple 속성을 추가해주었고 - html
- script
이대로 복붙만 하면 사진 미리보기 기능을 넣을 수 있다 참 쉽죠잉 본 게시물에서는 html input 태그로 이미지 파일을 여러 장 추가하고, 양식을 제출하기 전에 미리 이미지를 띄워 preview 할 수 있도록 구현한 것을 정리해 보았다. 구현 전에, 우리가 쓸 요소와 구조가 어떻게 이루어질지 먼저 정리해보자. 먼저 알아가기<input type="file" /> 에 대해서타입이 file인 input 태그는 파일을 추가할 수 있는 기능이 들어있다. 이 태그를 사용하면 html에서 기본으로 제공해주는 버튼이 등장한다. 파일 선택 버튼을 클릭하여 파일을 선택하면 파일명이 나온다. - multiple 속성만약 한꺼번에 여러 개의 파일을 선택하고 싶다면 input 태그에
속성 multiple이 있는 상태에서 파일을 여러 개 추가해주면 파일명이 나열 되는 게 아니고 사진과 같이 - accept 속성
어떤 형식의 파일을 받을 것인가를 적는 속성이다. - onChange 이벤트우리가 파일선택 버튼을 클릭한 후 파일을 선택하여 추가하는 행위는 onClick이 아닌 onChange 이벤트에 속한다. 그러므로 preview를 만드는 함수는 onChange 이벤트 안에서 이루어진다. e.target.files의 타입파일 선택을 하면 onChange 이벤트가 발생한다. 여기서 e.target.files을 가져와 보면 FileList 타입의 객체 안에 File 타입의 요소(우리가 선택한 파일)가 나열된다. 우리가 해야 할 것은 이 객체를 배열로 만들어 요소 하나하나를 url로 변환해 주는 것이다. 객체를 배열로 변환하듯이 Array.from 메서드를 사용하여 변환하면 되는데 타입스크립트를 쓴다면 신경을 조금 써줘야 한다. onChange 이벤트에서 가져온 event부터 event.target, event.target.files까지 전부 타입을 지정해주어야 한다. 구현
1. 파일 선택 버튼 커스텀하기
2. 이미지들이 보일 preview 자리 만들기
3. 이미지 파일들로 이루어진 배열 상태 값 만들기현재 상태에서는 파일 추가가 안된다. e.target.files는 객체이며 이전 파일들이 남아있는 상태에서 쌓이는 게 아니고 파일선택 버튼을 누를 때마다 선택한 파일들이 초기화되기 때문에 배열에 내가 선택한 이미지 파일들이 stack처럼 쌓일 수 있도록 함수를 만들어줘야 한다.
4. 이미지 파일을 stack처럼 쌓기 위한 함수 만들기지금부터 input 태그의 onChange 이벤트(파일을 선택하는 행위)가 발생하면 실행될 함수를 만든다.
- handleChange
5. 배열 상태 값(images)을 map으로 돌려 이미지 뿌리기
여기까지 preview를 구현해보았다. . +추가로 가로스크롤 (tailwind)css는:
참고
|