타닥타닥 민타쿠

사용자가 input 태그를 통해 이미지 파일 선택을 하면, 해당 이미지 파일을 저장하는 업로드 기능을 구현하는 방법이다. 파일 선택하면 저장하는 법 npm install multer HTML - form 태그로 감싼 input 태그 만들기(name 중요) 스크립트 - input 태그로 파일 선택을 하면 form 태그 submit 시키기 $('#inputImg').on('change',submit); function submit() { $('#imgForm').submit(); } app.js - multer 를 이용해 라우팅 처리하기 // app.js var multer = require('multer'); var imgStorage = multer.diskStorage({ destination: fun..

마우스 커서를 가져가면 파일 선택 버튼이 보이고, 이미지 파일을 선택하면 해당 이미지를 화면에 보여주는 미리보기 기능을 구현하는 방법에 대해 알아보겠다. HTML 레이아웃 id 기준으로, - imgBox : 마우스 오버를 감지할 곳이다. - imgTag : 이미지 미리보기를 나타낼 곳이다. - inputImg : 파일을 입력 받을 input 태그이다. jpg, png 형식만 accept 로 지정해 해당 확장명의 파일 선택을 유도한다. onchange 시 파라미터로 this 를 넘겨주며 loadFile 함수를 실행한다. 마우스 오버 감지 $('#imgBox').on('mouseover', function() { $('#inputImg').show(); }); $('#imgBox').on('mouseout'..