파일 선택기를 누르면 나오는 섬네일을 만들어보자!
특징1. 자바스크립트코드는 한번 딱! 생성되면 다시 원래대로 돌아가버린다. [무한한 요청을 해야한다]
특징2. FileReader() 객체를 생성하여, onload 되었을경우 발생되는 상황을 함수로 만든다.
* FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. /출처 MDN
*onload 는 , 이벤트 읽기동작이 성공적으로 완료될때마다 발생한다.
1. img element를 만들어, setAttribute로 src에 event.target.result 로 [파일탐색기에 들어있는 경로를 담고]2. 역시나 setArrtibute로, CSS 먹일 id를 지정한 후에,3. 기존에 디폴트세팅으로 있던 이미지를 제거하고4. 새로 만든 이미지를 div에 append한다!
짜잔-
짜...잔...?ㅇㄴ
이씨... 다시 기존에 있는 것을 지우는 것을 같이 작성한다.
특정 파일이 아니라, 부모요소의 두번째 자식을 삭제하는것으로 변경.[내경우, div의 두번째 자식이 img이므로]
짜잔짜잔
완성!
수정
간단하게 URL 내장객체로, createObjectURL 메서드로, SRC를 뽑을 수 있다.
'공부용-사이드프로젝트 > Nodejs - 미니프로젝트-쇼핑몰' 카테고리의 다른 글
| extra) 자바스크립트 내장 클래스 URL 클래스로, 섬네일 편하게 만들기 (0) | 2022.09.25 |
|---|---|
| extra) input type = "file" 을 사용할 때, CsrfToken의 제출방법! (1) | 2022.09.25 |
| 4. 물품 올리기! 업데이트! 삭제까지! (1) | 2022.09.25 |
| 2. 로그인페이지, 검증과 오류처리, 세션, 물건 업데이트 페이지 생성 (0) | 2022.09.21 |
| 1. 구상하기, 세팅하기, 기본 가입페이지만들어보기 (1) | 2022.09.19 |
댓글