onchange (2) 썸네일형 리스트형 Javascript) 서버와 통신 없이 file 타입의 input에 업로드한 이미지 파일 바로 화면에 보여주기 (input onchange event) 파일 타입의 input에 사용자가 파일을 넣고, 별도의 서버 통신 없이도 이 파일을 화면에 보여주는 방법이다. 그냥 input에 value를 읽으면 fake path로 보여주기 때문에 file reader 객체를 통해서 읽어야 한다. $("#file-input").on("change", (e) => { var file = e.target.files[0] var fr = new FileReader(); fr.readAsDataURL(file) fr.onloadend = (e) => { $("#uploaded-file-img").append(` `) } }) React) input onChange, button onClick 이벤트 핸들링 input onChange, button onClick Event Handling source code import React, { useState } from 'react'; const EventHandling = () => { const [message, setMessage] = useState(''); return ( Event Practice { setMessage(e.target.value) } } /> { alert(message); setMessage(''); } }>확인 ); } export default EventHandling; result npm start로 위 프론트엔드 코드를 브라우저에 띄우면 다음과 같은 화면이 보입니다. input 칸에 사용자가 텍스트를 입력하면 그 값이 val.. 이전 1 다음
