当选择txt文件时，我想添加与文件行数相同的输入，并将每行的文本放入生成的输入中。
https://jsfiddle.net/w80dv2fx/
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form name="mainForm" method="get" id="Main">
<p>input 1:<textarea id="input1" cols="20" rows="2"></textarea>
<p>input 2:<textarea id="input2" cols="20" rows="2"></textarea>
<p>input 3:<textarea id="input3" cols="20" rows="2"></textarea>
<p>
<div>
<label for="file">Choose file to upload</label>
<input type="file" id='fileinput' accept=".txt">
</div>
</form>
</body>
</html>
JQUERY:
(function() {
var input = document.getElementById("fileinput");
input.addEventListener("change", loadFile, false);
function loadFile() {
var file, fr;
if (typeof window.FileReader !== 'function') {
alert("The file API isn't supported on this browser yet.");
return;
}
if (!input.files) {
alert("This browser doesn't seem to support the `files` property of file inputs.");
} else if (!input.files[0]) {
alert("Please select a file before clicking 'Load'");
} else {
file = input.files[0];
fr = new FileReader();
fr.onload = receivedText;
fr.readAsText(file);
}
function receivedText() {
var data = fr.result.split('n');
document.getElementById("input1").value = data[0];
document.getElementById("input2").value = data[1];
document.getElementById("input3").value = data[2];
}
}
})();
现在它只适用于3个输入，并且不会添加与行数相同的输入。
html
<form name="mainForm" method="get" id="Main">
<p>
<div>
<label for="file">Choose file to upload</label>
<input type="file" id='fileinput' accept=".txt">
</div>
</form>
javascript receivedText() function
function receivedText() {
var data = fr.result.split('n');
for(let i = 0; i < data.length; i++) {
let app = document.querySelector('#Main');
let html = `<p>input ${i}:<textarea id="input1" cols="20" rows="2">${data[i]}</textarea></p>`;
app.insertAdjacentHTML("beforebegin", html);
}
}
我看到你只处理前3行(data[0]，data[1]，data[2])。
你需要创建相同数量的输入，因为你有行
在receivedText函数中u需要遍历data变量
var data = fr.result.split('n');
const formEl = document.querySelector('form[name=mainForm]')
// or define id attribute for parent element
data.forEach((line) => {|
const inputEl = document.createElement('input')
input.value = line
formEl.appendChild(input)
})