Question

我是一个非常编码的初学者，我正在努力用Javascript从.txt获取数据。我有一个非常简单的txt文件。我想用Javascript读取文件并将信息理想地存储到数组中。

这是我的txt内容：

"Italy":  30,
"France":  28,
"Netherlands":  1,
"Germany":  14,
"Greece":  4,
"Spain":  3,
"others":  12

检查完所有可能的论坛后，我要做的是以下内容。我可以选择txt文件并使用以下代码显示内容：

HTML：

<!DOCTYPE html>
<html>

<style type="text/css"> 
     #filecontents { 
          border:double; 
       overflow-y:scroll; 
       height:400px; 
     } 
</style>

<head>
    <meta charset="UTF-8">
    <script src="FileReaderLogic.js"></script>
</head>
<body> 
     Please Select text file of which contents are to be read: 
      <input type="file" id="txtfiletoread" />
    <div>The File Contents are as below:</div> 
    <div id="filecontents">
        <script>ReadText()</script>
    </div>
</body>

</html>

FileReaderLogic.js：

window.onload = function ReadText() { 

//Check the support for the File API support 
if (window.File && window.FileReader && window.FileList && window.Blob) {

var fileSelected = document.getElementById('txtfiletoread');
fileSelected.addEventListener('change', function (e) { 
     //Set the extension for the file 
     var fileExtension = /text.*/; 
     //Get the file object 
     var fileTobeRead = fileSelected.files[0];
    //Check of the extension match 
     if (fileTobeRead.type.match(fileExtension)) { 
         //Initialize the FileReader object to read the 2file 
         var fileReader = new FileReader(); 
         fileReader.onload = function (e) { 
             var fileContents = document.getElementById('filecontents'); 
             fileContents.innerText = fileReader.result; 
         } 
         fileReader.readAsText(fileTobeRead); 
     } 
     else { 
         alert("Please select text file"); 
     }
   }, false);} 
else { 
    alert("Files are not supported"); 
}
}

这样可以正常工作，但我无法在oder中更改此代码，直接在代码中输入文件名/路径（无需按钮，无需用户选择），并将文件数据存储到变量或数组中。

你能帮我吗？

非常感谢

Answer 1

正如评论中所说，出于明显的安全原因，你不能这样做。

现在，这种问题往往来自于你有什么问题以及如何解决它的错误观点。

从最快的方式开始工作，如果我了解您的需求（如果^^则很大）：

将您的.txt文件重命名为.js

2 - 将其内容设为js Object，如下所示：

var country_code={
  "Italy":  30,
  "France":  28,
  "Netherlands":  1,
  "Germany":  14,
  "Greece":  4,
  "Spain":  3,
  "others":  12
};

3 - 在你的html中包含你的js文件

<script src="./script/country.js" type="text/javascript"></script>

并且您的数组变量包含文件中的所有值，可在主页中使用。

例如：

<script type="text/javascript">
var test='';
for (var country in country_code) {
  test += country+':'+country_code[country]+'<br />';
}
document.body.innerHTML = test; 
</script>

有帮助吗？

Answer 2

使用 AJAX （异步JavaScript和XML）调用文本文件的内容，然后稍微修改文本文件，以便数据是以 JSON (JavaScript Object Notation) 格式存储。

您可以将文本文件的路径硬编码到AJAX组件的配置中。

此外，文本文件中的数据更适合JavaScript Object，而不是Array，因为数组不允许在不进入嵌套数组的情况下设置键/值对。对象是存储键/值对的数据结构，事实上，如果您使用{和}简单地包装文本文件的内容，您将拥有转换为JSON的对象的语法格式。

data.txt （这是一个符合JSON数据格式的字符串）

{
 "Italy":  30,
 "France":  28,
 "Netherlands":  1,
 "Germany":  14,
 "Greece":  4,
 "Spain":  3,
 "others":  12
}

HTML （注意：您的代码未找到正确位置）

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <script src="FileReaderLogic.js"></script>
    <style> 
      #filecontents { 
        border:double; 
        overflow-y:scroll; 
        height:400px; 
      } 
    </style>
  </head>
  <body> 
    Please Select text file of which contents are to be read: 
    <div>The File Contents are as below:</div> 
    <div id="filecontents"></div>
    <script>ReadText()</script>
  </body>
</html>

<强> FileReaderLogic.js

var dataObj = null; // Will hold data after AJAX call completes

function ReadText() {
  // Create instance of XHR 
  var xhr = new XMLHttpRequest();

  // Set up event callback functions
  xhr.addEventListener("load", transferComplete);
  xhr.addEventListener("error", transferFailed);

  // Configure the request. Replace pathToTextFile with a relative
  // path to a file (in the same domain as this file). 
  xhr.open("GET", pathToTextFile, true);

  // Request body will be plain text
  xhr.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");

  // Make the request:
  xhr.send(null);
}

// Success Callback:
function transferComplete(evt) {
  // Place the response in the HTML placeholder:
  document.getElementById("filecontents").textContent = xhr.responseText;

  // Turn text file content into object
  dataObj = JSON.parse(xhr.responseText); 

  // Now, use the object as you like:
  console.log(dataObj.Italy); // 30

  // This will print all the key/value pairs
  for(var key in dataObj){
     console.log(key + " = " + dataObj[key]);
  }
}

// Error callback:
function transferFailed(evt) {
  console.log("An error occurred while processing the request.");
}

使用javascript从txt文件获取内容

2 个答案: