Fatal编程技术网
  • javascript/
  • 使用JavaScript从1.dat文件读取数据

使用JavaScript从1.dat文件读取数据

javascript parsing

使用JavaScript从1.dat文件读取数据,javascript,parsing,data-processing,Javascript,Parsing,Data Processing,这是我关于JavaScript的第一个问题，因为我想将1.dat文件中的数据读取到相应的文本字段/框中 是1.dat文件的结构 3 "Caroline Martin","2007 E.L Road","Los Angeles CA 87457",43 "Brian Green", "210 AB Street","New York NY 10002&quo

这是我关于JavaScript的第一个问题，因为我想将1.dat文件中的数据读取到相应的文本字段/框中

是1.dat文件的结构

    3  
    "Caroline Martin","2007 E.L Road","Los Angeles CA 87457",43  
    "Brian Green", "210 AB Street","New York NY 10002",52  
    "Amy Baker","3213 Canta Mount", "Miami FL 33133",61
3-marker没有3个人的记录：姓名、地址1、地址2、年龄

因此，应该如何用JavaScript对结构进行编码，以便在HTML的各个文本框中读取和显示相应的数据

我构建了一个示例，介绍如何从dat文件读取和解析数据，并将其分配到文本字段中：

1.dat文件结构

3  
"Caroline Martin","2007 E.L Road","Los Angeles CA 87457",43  
"Brian Green", "210 AB Street","New York NY 10002",52  
"Amy Baker","3213 Canta Mount", "Miami FL 33133",61
HTML

Javascript

var client = new XMLHttpRequest();
client.open('GET', '1.dat');
client.onload = (function(){

var txt = client.responseText;

var arr = [];
var lines = txt.split('\n');

for(j=1; j < lines.length; j++)
{
  lines[j] = lines[j].replace(/["]/g,'');
  arr[j] = lines[j].split(",");
  document.getElementById('txtName'+j).value = arr[j][0];
  document.getElementById('txtAdd1'+j).value = arr[j][1];
  document.getElementById('txtAdd2'+j).value = arr[j][2];
  document.getElementById('txtAge'+j).value = arr[j][3];
}

})
client.send(null);
全部代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Template</title>


  </head>
  <body>

<form>
<input id="txtName1" type='text'/>
<input id="txtAdd11" type='text'/>
<input id="txtAdd21" type='text'/>
<input id="txtAge1" type='text'/>

<input id="txtName2" type='text'/>
<input id="txtAdd12" type='text'/>
<input id="txtAdd22" type='text'/>
<input id="txtAge2" type='text'/>

<input id="txtName3" type='text'/>
<input id="txtAdd13" type='text'/>
<input id="txtAdd23" type='text'/>
<input id="txtAge3" type='text'/>
</form>
<SCRIPT TYPE="text/javascript">


var client = new XMLHttpRequest();
client.open('GET', '1.dat');
client.onload = (function(){

var txt = client.responseText;

var arr = [];
var lines = txt.split('\n');

for(j=1; j < lines.length; j++)
{
  lines[j] = lines[j].replace(/"/g,'');
  console.log(lines);
  arr[j] = lines[j].split(",");
  document.getElementById('txtName'+j).value = arr[j][0];
  document.getElementById('txtAdd1'+j).value = arr[j][1];
  document.getElementById('txtAdd2'+j).value = arr[j][2];
  document.getElementById('txtAge'+j).value = arr[j][3];
}

})
client.send(null);




</SCRIPT>


  </body>
</html>
由于安全限制，您不能在没有用户交互的情况下自动打开本地文件！您将得到仅支持协议方案的跨源请求：http、数据等

当用户选择一个文件时，我们必须在页面上放置一个输入文件并执行一些操作

编辑：更新代码以显示文件数据，使用上一个/下一个按钮逐个记录

编辑2：更新以跳过空行/不正确行：

<!DOCTYPE html>
<html>
<head>
  <title>File read test</title>

</head>

<body>

<p><input type='file' accept='*.dat' onchange='openFile(event)'></p>

<input type='button' id="btnPrev" value="Prev <" onclick="goRecord(-1)" />

<input type='text' id="txtName" />
<input type='text' id="txtAdd1" />
<input type='text' id="txtAdd2" />
<input type='text' id="txtAge" />

<input type='button' id="btnNext" value="> Next" onclick="goRecord(+1)" />


<script type="text/javascript">
  var data = [], cur;
  var inputs = ["txtName", "txtAdd1", "txtAdd2", "txtAge"]; //id of inputs

  function openFile(event) {

    var input = event.target;

    var reader = new FileReader();

    reader.onload = function () {
      var text = reader.result;
      //if (text!=null && text.length>0)
      var lines = text.split(/\r?\n/g); //split by newline chars to get all lines as array
      var k = -1;
      for (var i = 1; i < lines.length; i++) { //skip first line as it is Nlines
        var r = lines[i].replace(/"/g, "").split(","); //remove quotation marks and split to cols
        if (r.length == inputs.length) { //this row has correct number of columns (4)
          k++;
          data[k] = [];
          for (var j = 0; j < r.length; j++) {
            data[k][j] = r[j];
          }
        }
      }
      cur = 0; dispRecord(cur); //go to first record
    };

    reader.readAsText(input.files[0]);
  }

  function dispRecord(r) {
    var n = data[r].length;
    for (var j = 0; j < n; j++) {
      document.getElementById(inputs[j]).value = data[r][j];
    }
  }

  function goRecord(step) {
    var k = cur + step;
    if (k < 0) k = 0; else if (k >= data.length) k = data.length - 1;
    cur = k;
    dispRecord(cur);
  }

</script>

</body>
</html>
我在下面尝试实现我想要实现的目标，但失败了

<!DOCTYPE html>
<html>
<head>
 <title>File read test</title>
</head>
<body>

<script type="text/javascript">
 var cur = 3;
 var openFile = function (event) {
 var input = event.target;

 var reader = new FileReader();
 reader.onload = function () {
 var text = reader.result;
 var lines = text.split(/\r?\n/g);
 var n = parseInt(lines[0], 10); //10 is radix
 var s = "", i = 0;
 for (var c = 0; c < n; c++) {
  var row = lines[++i].replace(/"/g, "").split(","); //remove quotation marks and split to cols
 for (var t = 0; t < 4; t++) {
   s += "<input type='text' id='txtName' value=\"" +  row[t].replace(/^\s+|\s+$/g, "") + "\" /> \r\n";
  }
  s += "<br/>";
}
//if (text!=null && text.length>0)
document.getElementById('myConainer').innerHTML = s;
};
reader.readAsText(input.files[0]);
};

function dispValue() {   
   document.getElementById('txtName').value = Names[i];   
   document.getElementById('txtAdd1').value = Add1[i];   
   document.getElementById('txtAdd2').value = Add2[i];   
   document.getElementById('txtAge').value = Age[i]; 
 }
function cmdNext() {    
if(i<cur-1) {      
   i = i + 1;      
  dispValue();    
 }
 }

function cmdPrevious() {   
 if(i>0) {      
  i = i - 1; 
 dispValue(); 
} 
}      

</script>
<input type='file' accept='*.dat' onchange='openFile(event)'> <br/>
<div id="myConainer">
</div>
</body>
</html>
究竟需要做些什么？因为当按下next（下一步）时，命令应显示另一条记录，按下previous（上一步）按钮应显示previous（上一条）记录，即为什么只有四个文本框可分别读取所有三条记录。因此，基本上，每个名称Add1 Add2和年龄分别从1.dat文件的4个文本框中读取

预期结果是什么？您是否正在尝试设置每个元素的.value？显示您的努力Dear guest271314因为我是javascript新手，我不知道结果会是什么样，因为存在显示完整文件或读取为我不想要的文本文件的man线程。1.dat文件位于客户端或服务器端的何处？当文件中有多行时，是要获取多行文本框以显示所有数据，还是仅获取一行？@S.Serp此文件位于我的PC@L使用HTML和Js文件的Vadim 1.dat在哪里？它位于C:\Test-Trial1\1.dat中。还是没什么用。我知道为什么会生成这么多文本字段，你必须将1.dat放在域的根目录下。我为每个记录生成了一组字段。目前，我只想查看C:\Test-Trial1\1.Dat中的记录。在没有var client=newxmlhttprequest的情况下是否可以查看；client.open'GET'、'1.dat'；client.onload=函数{也未达到域和服务器级别FYI@S.Serp非常好的介绍和解释。目前得到了它。实际上只想有四个文本字段，即名称，地址1，地址2和年龄。与下一个和上一个按钮消失d要查看记录集您很好！如果可以，请选择它作为接受答案以投票给编码人员单击答案左侧的勾号；其他方法可以实现我想要的结果。我对此完全不熟悉。代码已更新，以使用上一个/下一个按钮逐记录显示文件数据。请检查它now@S.Serp发誓这就是我想要的。专业bably在第1个id txtName的最后一条记录处，按下“下一步”时，它将变为空白，但其他三个文本id保持不变。仅供参考 
    3  
    "Caroline Martin","2007 E.L Road","Los Angeles CA 87457",43  
    "Brian Green", "210 AB Street","New York NY 10002",52  
    "Amy Baker","3213 Canta Mount", "Miami FL 33133",61  

<!DOCTYPE html>
<html>
<head>
 <title>File read test</title>
</head>
<body>

<script type="text/javascript">
 var cur = 3;
 var openFile = function (event) {
 var input = event.target;

 var reader = new FileReader();
 reader.onload = function () {
 var text = reader.result;
 var lines = text.split(/\r?\n/g);
 var n = parseInt(lines[0], 10); //10 is radix
 var s = "", i = 0;
 for (var c = 0; c < n; c++) {
  var row = lines[++i].replace(/"/g, "").split(","); //remove quotation marks and split to cols
 for (var t = 0; t < 4; t++) {
   s += "<input type='text' id='txtName' value=\"" +  row[t].replace(/^\s+|\s+$/g, "") + "\" /> \r\n";
  }
  s += "<br/>";
}
//if (text!=null && text.length>0)
document.getElementById('myConainer').innerHTML = s;
};
reader.readAsText(input.files[0]);
};

function dispValue() {   
   document.getElementById('txtName').value = Names[i];   
   document.getElementById('txtAdd1').value = Add1[i];   
   document.getElementById('txtAdd2').value = Add2[i];   
   document.getElementById('txtAge').value = Age[i]; 
 }
function cmdNext() {    
if(i<cur-1) {      
   i = i + 1;      
  dispValue();    
 }
 }

function cmdPrevious() {   
 if(i>0) {      
  i = i - 1; 
 dispValue(); 
} 
}      

</script>
<input type='file' accept='*.dat' onchange='openFile(event)'> <br/>
<div id="myConainer">
</div>
</body>
</html>