1. multerモジュールをインストール
2. クライアント側でinput(type=“file”, name=“file”) ファイルアップロードのフォームを作成
3. クライアント側ではenctype=“multipart/form-data” でファイルを受け取れる
4. サーバ側ではmulter({ dest: 'tmp/' }).single('file') でポスト時に単一ファイルを受け取れる
5. サーバ側ではファイルの情報はreq.file に格納される

form(action=“./upload” method=“POST” enctype=“multipart/form-data”)
input(type=“file”, name=“file”)
input(type=“submit” value=“Upload” id=“upload” )

router.post('/upload', multer({ dest: 'tmp/' }).single('file'), function (req, res, next) {
console.log(req.file.path, req.file.originalname)
res.render('uploaded');
});

1. index.pugではファイルを受け付けるフォームと、javascriptを読み込むscriptタグ、テキストを表示するタグを作成
2. javascript側ではフォームに“change”イベントが発生した時に、var text = document.getElementById(“text”); でファイルの一覧を取得
3. javascript側で、var reader = new FileReader() でFileReaderインスタンスを起動
4. javascript側でreader.readAsText(file[0])でファイルの一覧の一番目のテキストを取得
5. javascript側で、readerのonload時にtext.textContent = reader.result でテキストの中身をブラウザに表示

input(type=“file”, name=“file” id=“inputfile”)
p(id=“text”)
script(src=“./javascripts/main.js”)


var inputFile = document.getElementById("inputfile"); \\
var text = document.getElementById("text"); \\

inputFile.addEventListener("change", function (e) { \\
  var file = e.target.files \\
  var reader = new FileReader() \\
  reader.readAsText(file[0]); \\
  reader.onload = function () { \\
  text.textContent = reader.result; \\
  } \\
}, false); \\