multerモジュールをインストール
クライアント側でinput(type=“file”, name=“file”) ファイルアップロードのフォームを作成
クライアント側ではenctype=“multipart/form-data” でファイルを受け取れる
サーバ側ではmulter({ dest: 'tmp/' }).single('file') でポスト時に単一ファイルを受け取れる
サーバ側ではファイルの情報は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');
});
index.pugではファイルを受け付けるフォームと、javascriptを読み込むscriptタグ、テキストを表示するタグを作成
javascript側ではフォームに“change”イベントが発生した時に、var text = document.getElementById(“text”); でファイルの一覧を取得
javascript側で、var reader = new FileReader() でFileReaderインスタンスを起動
javascript側でreader.readAsText(file[0])でファイルの一覧の一番目のテキストを取得
javascript側で、readerのonload時にtext.textContent = reader.result でテキストの中身をブラウザに表示
input(type="file", name="file" id="inputfile")
p(id="text")
script(src="./javascripts/main.js")
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);