Question

我一直在尝试从文件中读取数据，并使用java脚本将其显示在html页面中的某种listBov中。我一直在尝试很多cource，但是没有工作代码（我试过IE，Firefox和Chrome）

有尝试做到这一点，但也没有成功：

文件1： indexTST.html

<html>
<head>
<script language="JavaScript" type="text/javascript" src="java.js">
</script>
<body>
<td><form name="listBox" action="javascript:void 0;">
<select name="listBox" size="10">
<option>Select your home location</option>
<option>unknown</option>
</select>
</form>
<script type="text/javascript" language="JavaScript">
    loadData();
   with (document.listBox) {
      listBox.options.length=0;
      for (var i=0; i<Table.length; i++) {
        listBox.options[listBox.options.length]=new Option(Table[i]);
      }
   }
   reset1();
</script>
</body>
</html>

文件2： java.js

var Table = [];
var txtFile;

function loadData2() {
 Table = [];
 lines = txtFile.responseText.split("\n");
 for (i = 0; i < lines.length-1; i++) {
 Table.push(lines[i]);
 }
}

function loadData() {
var f = "dataFile.txt"; 
alert('01');
txtFile.open("GET", f, false);
alert('02');
txtFile.onreadystatechange=loadData2;
txtFile.send(null);
}

档案4： dataFile.txt

Data 01
Data 02
Data 03
end

我想要实现的目标是：

从文件中读取文本数据（1到5 000行之间），文件位于服务器端（非本地浏览器端）
将其显示在网页上的某种listBox
需要“可点击/可选” - 因为当用户选择即第5项时 - 这一项需要保存到“saved.txt”

感谢您的帮助

Answer 1

读取文件并将其内容按行添加到列表中，并记录所选选项。我希望它有所帮助。

＆＃13;

<!DOCTYPE html>
<html>
<body>

<h3>Read file</h3>

<input id="file-input" type="file" id="myFile">
<select multiple id="list"></select>
<button onclick="logSelected()">Log selected</button>

<script>
 function readSingleFile(evt) {
    //Retrieve the first (and only!) File from the FileList object
    var f = evt.target.files[0]; 

    if (f) {
      var r = new FileReader();
      r.onload = function(e) { 
	      var contents = e.target.result;
              console.log(contents);
         var select = document.getElementById('list');
         var lines = contents.split('\n');
         lines.map(function(line){
           var docLine = document.createElement('option');
           docLine.innerHTML = line;
           select.appendChild(docLine);
         });
        }
      r.readAsText(f);
    } else { 
      alert("Failed to load file");
    }
  }

  document.getElementById('file-input').addEventListener('change', readSingleFile, false);

function logSelected(){
var select = document.getElementById("list");
var selected = [];
for (var i = 0; i < select.length; i++) {
    if (select.options[i].selected) selected.push(select.options[i].value);
}
console.log(selected);
};
</script>

</body>
</html>

＆＃13;

通过javascript函数从文件读入html列表框

1 个答案: