20210126

ファイルをアップロードしてサーバに送信する

  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);


  • 20210126.1611629433.txt.gz
  • 最終更新: 2021/01/26 02:50
  • by 133.11.144.10