when the txt file is selected, I want to add as many inputs as the number of lines in the file and place the text of each line into the generated inputs.
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];
}
}
})();
Now it only works for 3 inputs and does not add as many inputs as the number of lines.
2
Answers
as i see u working only with first 3 lines (data[0],data[1],data[2]).
You need to create same amount of inputs as u have lines
So in
receivedText
function u need to run overdata
variablehtml
javascript receivedText() function