JS 文件输入获取内容 - Javascript

在 Javascript 中，我们可以通过不同的方法获取文件内容。其中一种比较常见的方法是通过文件输入获取内容。在本文中，我们将介绍如何使用 Javascript 获取文件输入并读取文件内容。

使用 input 标签获取文件

我们可以使用 HTML 的 input 标签来获取文件并将其读入 Javascript。例如，我们可以使用以下代码：

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

这将创建一个文件选择框，用户可以通过点击选择文件来将其读入 Javascript。

在 Javascript 中，我们可以使用以下代码来获取 input 元素并读取选定文件的内容：

var inputElement = document.getElementById("input");
inputElement.addEventListener("change", function() {
  var file = inputElement.files[0];
  var reader = new FileReader();
  reader.onload = function() {
    var content = reader.result;
    console.log(content);
  };
  reader.readAsText(file);
});

这里，我们使用了 FileReader 对象来读取文件内容，并在 onload 回调函数中获取文件内容并将其输出到控制台。注意，我们使用了 readAsText 方法来读取文本文件。

使用 AJAX 获取文件

另一种获取文件内容的方法是使用 AJAX。我们可以使用 XMLHttpRequest 对象来发送请求并获取文件内容。其中，我们需要将 responseType 属性设置为 "text"，以告知服务器返回纯文本内容。

以下是一个使用 AJAX 获取文件内容的示例代码：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'file.txt', true);
xhr.responseType = 'text';
xhr.onload = function() {
  if (xhr.status === 200) {
    var content = xhr.responseText;
    console.log(content);
  }
};
xhr.send();

这里，我们使用了 GET 方法发送请求，并将 responseType 属性设置为 "text"，以获取文件内容。在 onload 回调函数中，我们将文件内容输出到控制台。

总结

以上介绍了两种使用 Javascript 获取文件内容的方法：通过 input 标签获取文件，以及通过 AJAX 获取文件。通过这些方法，我们可以方便地读取文件内容并在代码中进行处理。