- Today
- Total
목록파일 업로드 (3)
개발하는 고라니
순수 Servlet을 이용해 파일을 업로드하고 로컬 저장소에 저장하는 것을 알아보자. 먼저 서버사이드에서 파일을 업로드하는 방법은 가장 간단하게 태그를 이용한 POST 방식이 있다. (form태그 속성 중 enctype을 반드시"multipart/form-data"로 변경) 자바스크립트와 Ajax를 이용한 방법도 있지만 이는 다음에 알아보고자 한다. 먼저 form 태그에 파일과 내용을 달아보자. 제목 첨부파일 저장 취소 reg라는 URL로 제목(title), 내용(content) 그리고 파일(f)가 전송될 것이다. 이를 Controller에서 받는 방법을 소개한다. Controller에서 파일 정보 가져오기 우리는 그동안 body에 담긴 데이터든, 쿼리스트링에 붙어있는 값이든 request.getPara..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bIPSKd/btq3yxopkgN/ncpbNGw7F5xcyvnF5PBh31/img.png)
이벤트 트리거로 파일을 업로드하는 방법도 있다면 요즘엔 드래그 앤 드랍 방식으로도 많이 사용한다. 그 방법을 알아보자. 먼저 이벤트 중에 drag라는 이벤트가 있는데 이를 좀더 자세히 보면 다음과 같이 있다. Drag & Drop 파일 업로드 네모난 박스에 파일을 드래그 했을 때 그 파일의 정보를 가져오는 것을 알아보기 전에 사전 준비를 해보자. HTML과 그에 필요한 Javascript 작성한다. HTML / JS 작성 파일업로드 : DND & Trigger 파일선택 var sec9 = document.querySelector('#ex9'); var btnUpload = sec9.querySelector('.btn-upload'); var inputFile = sec9.querySelector('inp..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bHxGUO/btq3mOwJfpN/5CCtw3xyHE8WcOVUA4RmLK/img.png)
파일 업로드 - multer node.js를 이용해 파일업로드 하는 것을 공부해보자. 파일을 업로드 하는 방법에는 크게 ajax를 이용한 비동기적인 방법과 form태그를 이용해 multipart로 보내는 방법이 있다. 우선 파일을 업로드 하기 위해서는 express, http 같은 모듈 외에 어떤 것이 필요한지 보자. 이 포스팅에서는 라우팅 및 서버에 관한 설명은 하지 않는다. var multer = require('multer'); var cors = require('cors'); var fs = require('fs'); var static = require('serve-static'); fs같은 경우 내장 모듈이라 따로 설치할 필요가 없지만, 'multer', 'cors'는 npm을 통해 설치하여야..