간단한것 같지만 간단하지 않은것 같습니다.
루트 URL로 접근시에 업로드 할수 있는 웹페이지를 Response 해 줍니다.
웹유저가 업로드 할 파일을 선택하고 제출버튼을 클릭했을때 Node.js 에서 처리해야 합니다.
Http Methos: post, enctype = Multipart/form-data 로 제출형식을 설정합니다.
1. Request객체에 있는 이벤트를 가지고 데이타를 분리해 낼수 있습니다. data, end 이벤트를 사용합니다.
2. formidable 모듈을 사용해서 파일을 저장할수 있습니다.
여기서 접근하기 쉽도록 저장될 폴더를 일단 지정합니다.
formidable.uploadDir = "tmp";
그리고 renameSync 을 해서 최종저장 하면 될듯 한데 아직 해보지는 않았습니다.
Readable Streams
이벤트 : data, end, error, close
메소드 : pause, resume, end, destroy
writable Streams
이벤트 : drain, error, close, pause, resume
메소드 : write, end, destroy
readable.pipe(writable)
Readable streams can be piped to writable streams. and vice verse.
on('data') => write(), on('end') => end(), on('drain') => resume(), on('close') => destroy(),
on('error') => error(), on('pause') => pause()
filesystem 에서 writeStream 이라는 메소드가 있는데 http 를 통해서 바이너리 데이타가 이동할때 사용해야 할듯 합니다.
readStream 사용하는 방법
writeStream 사용하는 방법
Drag & Drop 을 사용한 파일업로드 자바스크립트 분석
함수표현식으로 4가지가 있습니다.
기명함수 표현식 a = function a(){};
익명함수 표현식 a = function(){};
즉시실행 기명함수 표현식 ( function a(){ } )();
즉시실행 익명함수 표현식 ( function() { } )();
즉시실행 익명함수 표현식으로 함수가 작성되어 있습니다.
Introduction to XMLHttpRequest Level 2
New Tricks in XMLHttpRequest2
XMLHttpRequest 오브젝트 분석
이벤트핸들러(event handler) : 이벤트가 발생했을때 스크립트가 해당 이벤트에 반응하도록 만든 장치
| attribute | type | Explanation |
|---|---|---|
onloadstart | loadstart | When the request starts. |
onprogress | progress | While loading and sending data. |
onabort | abort | When the request has been aborted, either by invoking the abort() method or navigating away from the page. |
onerror | error | When the request has failed. |
onload | load | When the request has successfully completed. |
ontimeout | timeout | When the author specified timeout has passed before the request could complete. |
onloadend | loadend | When the request has completed, regardless of whether or not it was successful. |
1. request timeout 을 설정할수 있습니다.
2. FormData Object를 가지고 binary 데이타를 보낼수 있습니다.
FormData Object은 multipart/form-data 인코딩타입으로 보내지고 XHR이 바이너리 데이타를 보낼수 있도록 합니다.
Html form에서 FormData를 사용하기
var submitHandler = function(event) {
var dataToSend = new FormData(event.target), xhr = new XMLHttpRequest();
xhr.open('POST','/processing_script');
xhr.send(dataToSend);
}
var form = document.getElementById('myform');
form.addEventListener('submit',submitHandler,false)
XHR 을 사용하기 위해서는 객체를 생성한 다음에 open 함수를 가지고 전송방식과 url 을 설정하고 send 함수를 호출하면 됩니다. 여기서 비동기방식으로 진행되기 때문에 서버의 응답을 처리하는 로직이 들어갈 필요가 있습니다.
this.readyState == 4 && this.status == 200
다시 돌아와서 업로드 함수에서 XMLHttpRequest 객체를 생성해서 처리하고 있습니다.
FormData 오브젝트를 생성하고 이 오브젝트에 업로드할 파일을 첨부합니다. 오브젝트의 append(name, value) 함수를 사용합니다.
드래그 & 드랍시에 선택된 파일리스트를 목록을 먼저 작성합니다. 이때 사이즈합을 구해둡니다.
각 파일별로 XHR 오브젝트를 사용하여 FormData 에 담아서 Request를 날립니다.
그리고 responseText 를 result 공간에 innerHTML 를 사용하여 결과를 입력합니다.
서버에서 응답하는 responseText 의 형태는 'File uploaded to: ' + target_path + ' - ' + req.files.myfile.size + ' bytes' 이와 같습니다.
Retrieving a FileList Object
The HTML5 FileList object is an array-like collection of File objects. File input fields return a FileList via a files property (event.target.files). Dropped files return a FileList object via the event’s dataTransfer.files property (event.dataTransfer.files).
We can therefore retrieve a FileList object using single event handler:
// cancel event default
e.preventDefault();
// fetch FileList object
var files = e.target.files || e.dataTransfer.files;
// process all File objects
for (var i = 0, file; file = files[i]; i++) {
...
}Analyzing File Objects
FileList collections contain a number of File objects. Three useful File properties are provided:
- .name: the file name (it does not include path information)
- .type: the MIME type, e.g. image/jpeg, text/plain, etc.
- .size: the file size in bytes.
It’s possible to check a file type and size before further processing or uploads occur, e.g.
// process image files under 300,000 bytes
if (file.type.indexOf("image") == 0 && file.size < 300000) {
...
}특정폴더에 업로드된 파일리스트 내역 보기
filesystem 모듈을 가져와서 readdir 함수를 사용하여 파일목록을 가져오는데 콜백함수를 생성해서 처리합니다.
파일목록에 해서 stat 함수를 사용하여 파일의 속성을 가져옵니다. 물론 처리하는 방법은 콜백함수를 사용합니다.
파일 위치, 파일 명, 파일크기, 파일 수정시간을 객체에 담아서 목록배열객체에 해당객체를 저장합니다.
파일 찾기 기능도 이 프로세스내에서 구현할수 있습니다.
해당 목록배열객체를 response 객체에 담아서 보냅니다.
파일리스트에서 선택된 파일을 다운로드하기
response 객체의 download 함수를 사용하면 됩니다.
희망잡이
