20210126

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
次のリビジョン		 前のリビジョン
20210126 [2021/01/26 03:00] – [index.pug] 133.11.144.1020210126 [Unknown date] (現在) – 削除 - 外部編集 (Unknown date) 127.0.0.1
行 1: 行 1:
-====== ファイルをアップロードしてサーバに送信する ====== 
-  - multerモジュールをインストール 
-  - クライアント側で''input(type="file", name="file")'' ファイルアップロードのフォームを作成 
-  - クライアント側では''enctype="multipart/form-data"'' でファイルを受け取れる 
-  - サーバ側では''multer({ dest: 'tmp/' }).single('file')'' でポスト時に単一ファイルを受け取れる 
-  - サーバ側ではファイルの情報は''req.file'' に格納される 
- 
-===== 静的ファイル(index.pug) ===== 
-''form(action="./upload" method="POST" enctype="multipart/form-data") \\ 
-input(type="file", name="file") \\ 
-input(type="submit" value="Upload" id="upload" )'' 
- 
-===== サーバサイド(index.js) ===== 
-''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'' でテキストの中身をブラウザに表示 
-===== index.pug ===== 
- 
-  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);  
- 
  
  • 20210126.1611630004.txt.gz
  • 最終更新: 2021/01/26 03:00
  • by 133.11.144.10