HTML 如何在本地运行的html+javascript页面中访问和读取本地文件

在本文中，我们将介绍如何在本地运行的html+javascript页面中访问和读取本地文件的方法。本地运行的页面通常由浏览器打开，运行在本地计算机上。我们将通过以下几个步骤来实现这一目标：

阅读更多：HTML 教程

使用input元素和File API选择本地文件

要访问和读取本地文件，我们需要使用HTML的input元素与File API。通过在html文件中添加一个input元素，我们可以让用户选择本地文件。

<input type="file" id="fileInput">

然后，我们可以使用JavaScript获取用户选择的文件，并利用File API读取文件内容。

const fileInput = document.getElementById("fileInput");

fileInput.addEventListener("change", function(event) {
  const selectedFile = event.target.files[0];

  const reader = new FileReader();

  reader.onload = function(event) {
    const fileData = event.target.result;
    // 在这里可以使用已读取的文件内容
  };

  reader.readAsText(selectedFile);
});

上述代码中，我们给input元素添加了一个事件监听器，当用户选择文件时会触发该事件。我们通过event.target.files[0]获取用户选择的文件对象，并使用FileReader对象读取文件内容。通过reader.readAsText()方法可以以文本格式读取文件内容。

通过AJAX请求读取本地文件

除了使用上述的方法，我们还可以通过AJAX请求来读取本地文件的内容。通过发送一个HTTP GET请求，我们可以从服务器或本地文件系统获取文件的内容。以下是一个读取本地JSON文件的示例：

const xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const fileData = xhr.responseText;
    // 在这里可以使用已读取的文件内容
  }
};
xhr.send();

在上述代码中，我们通过XMLHttpRequest对象发送了一个GET请求，请求的URL为”data.json”，即本地文件系统上的一个JSON文件。当请求完成后，通过xhr.readyState和xhr.status的值进行判断，如果状态码为200，说明请求成功，我们可以通过xhr.responseText获取文件内容。

需要注意的是，由于浏览器的安全策略限制，以上方法只能在本地运行的html+javascript页面访问和读取本地文件。如果将页面部署到Web服务器上，以上方法将无法访问文件系统。