20210126

差分

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

この比較画面へのリンク

両方とも前のリビジョン 前のリビジョン
20210126 [2021/02/04 03:15] – [アップロードしたファイルの中身をサーバに送信] 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);  
- 
-====== アップロードしたファイルの中身をサーバに送信 ====== 
-[[https://teratail.com/questions/36146]]を参照 
-  - layout.pugでjqueryを読み込み \\ ''script(src="https://code.jquery.com/jquery-2.2.4.js", integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=", crossorigin="anonymous")'' 
-  - FileReaderのreadAsTextメソッドで取得したファイルの中身を送信出来るようにjson形式にしておく 
-  - ボタンクリック時にajax通信で内容を飛ばすようにする。 
-  - index.js側ではPOSTしたURL側でreq.bodyで受け取る 
- 
- 
- 
  
  • 20210126.1612408539.txt.gz
  • 最終更新: 2021/02/04 03:15
  • by 133.11.144.10