テキストファイルから、キーのリストを読み込んでPOSTする。
イメージ
方法
テキストファイルから読み込んだ情報をformの要素として挿入する。
以下では、formのidを使ってsearchFormをの要素として挿入している。
その後、挿入したidを使用してデータをpost。(以下はjson形式でpostする例)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.3.min.js"></script>
<title>File 読み込みテスト</title>
</head>
<body>
<pre id="preview"></pre>
<input type="file" id="getfile" accept="text/*">
<form method="post" id="searchForm" name="searchForm">
<input type="button" name="btn" value="テキストファイルの内容をpostする" onclick="funcSearch();">
</form>
<script>
var file = document.querySelector('#getfile');
file.onchange = function () {
console.log("file reading...");
var fileList = file.files;
//読み込み
var reader = new FileReader();
reader.readAsText(fileList[0]);
//読み込み後
reader.onload = function () {
console.log(reader.result.split('\n'));
var ele = document.createElement('input');
ele.setAttribute('type', 'hidden');
ele.setAttribute('name', 'MidList');
ele.setAttribute('id', 'target');
ele.setAttribute('value', reader.result.split('\n'));
document.searchForm.appendChild(ele);
// 画面に出力
document.querySelector('#preview').textContent = reader.result;
};
}
function funcSearch() {
// ファイル読み込みからセットした値をidを指定して取り出す
const target = document.getElementById("target");
var midList = target.getAttribute("value").split(",");
// hashでセット。配列で送信したいのでjsonにする
var data = {"MidList":midList};
console.log(JSON.stringify(data));
$.ajax({
type: "post",
url: "http://localhost:8080/sample",
data: JSON.stringify(data),
contentType: 'application/json',
dataType: "json",
success: console.log("ok")
});
};
</script>
</body>
</html>