js 获取文件内容

js 获取文件内容
JavaScript（简称JS）是一种广泛应用于网页开发的脚本语言，它可以用来实现网页的动态效果、交互功能等。

在网页开发中，有
时候我们需要获取文件的内容，比如读取用户上传的文件内容，或
者获取服务器上的文件内容等。

本文将介绍如何使用JavaScript来
获取文件的内容。

一、使用input标签获取文件。

在HTML中，我们可以使用input标签的type属性为file来创
建一个文件选择框，用户可以通过这个文件选择框选择本地文件。

当用户选择文件后，我们就可以通过JavaScript来获取文件内容了。

```html。

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

<script>。

document.getElementById('fileInput').addEventListener('chan ge', function() {。

var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {。

var content = e.target.result;
// 在这里可以对文件内容进行处理。

}。

reader.readAsText(file);
});
</script>。

```。

上面的代码中，我们通过addEventListener方法给文件选择框添加了change事件的监听器，当用户选择文件后，就会触发这个事件。

在事件处理函数中，我们首先通过this.files[0]来获取用户选择的文件，然后创建一个FileReader对象，通过它的readAsText方法来读取文件内容。

在读取完成后，会触发reader 对象的onload事件，我们可以在这个事件中获取文件内容并进行处理。

二、使用XMLHttpRequest获取文件。

除了通过input标签来获取文件外，我们还可以使用XMLHttpRequest对象来获取服务器上的文件内容。

下面是一个示例代码：
```javascript。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'file.txt', true);
xhr.onreadystatechange = function() {。

if (xhr.readyState === 4 && xhr.status === 200) {。

var content = xhr.responseText;
// 在这里可以对文件内容进行处理。

}。

}。

xhr.send();
```。

上面的代码中，我们首先创建了一个XMLHttpRequest对象，然
后调用它的open方法来指定请求的方法、URL和是否异步。

接着我
们给xhr对象添加了一个onreadystatechange事件的监听器，当readyState属性为4（表示完成）且status属性为200（表示成功）时，就说明文件内容已经获取成功了，我们可以通过
xhr.responseText来获取文件内容并进行处理。

三、使用fetch API获取文件。

除了XMLHttpRequest外，我们还可以使用fetch API来获取文
件内容，fetch API是一种现代的网络请求接口，它使用起来更加
简洁和方便。

下面是一个使用fetch API获取文件内容的示例代码： ```javascript。

fetch('file.txt')。

.then(response => response.text())。

.then(content => {。

// 在这里可以对文件内容进行处理。

});
```。

上面的代码中，我们首先调用fetch方法来发起一个GET请求，然后通过then方法来处理响应，第一个then方法中我们调用了
response.text()来获取响应的文本内容，第二个then方法中我们
就可以获取到文件内容并进行处理了。

总结。

本文介绍了三种常见的方法来获取文件内容，分别是使用
input标签、XMLHttpRequest和fetch API。

通过这些方法，我们
可以轻松地获取文件的内容并进行处理，从而实现各种有趣的功能。

希望本文能对你有所帮助，谢谢阅读！。