自动读取
对于安全原因,JavaScript 不允许自动读取本地文件系统中的文件,需要用户手动选择本地文件后进行读取操作。
// 创建一个 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
// 指定读取 txt 文件的地址以及请求方式
xhr.open('GET', 'path/to/file.txt', true);
// 设置响应类型
xhr.responseType = 'text';
// 监听 XMLHttpRequest 对象的 onload 事件
xhr.onload = function() {
if (xhr.status === 200) { // 确认响应状态为成功
console.log(xhr.responseText); // 打印获取到的文件内容
} else {
console.log('请求失败!');
}
};
// 发送请求
xhr.send();
手动读取
-
JavaScript 不能直接访问本地文件系统,仅能通过浏览器提供的接口进行读取。如果想要在网页中读取本地文件,则需要使用 input 元素的 file 类型,让用户选择本地文件后再进行读取。
-
以下是一个基本的JavaScript代码,用于读取本地C盘下存放的txt文件内容:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>读取本地文件内容</title>
</head>
<body>
<input type="file" id="inputfile" />
<button onclick="readFile()">读取文件</button>
<splashes v-if="activeKey === '7'" :chart-data="chartData" />
<script>
function readFile() {
var file = document.getElementById('inputfile').files[0]; // 获取选择的文件
if(!file) return;
var reader = new FileReader();
reader.readAsText(file, 'UTF-8'); // 以文本格式读取文件
reader.onload = function(event) {
console.log(event.target.result); // 打印获取到的文件内容
}
}
</script>
</body>
</html>
-
以上代码使用了 input 元素的 file 类型,让用户选择本地文件。点击“读取文件”按钮后,调用了 readFile 函数。在 readFile 函数中,获取选择的文件,并创建了一个 FileReader 对象,将文件以 UTF-8 编码格式读取为文本。在 onload 回调函数中,可以通过事件对象的 target.result 属性获取到读取到的文件内容,并打印在控制台中。
-
建议使用
json
文件,在使用时需要JSON.parse()
转换一下。 -
如果遇到
\r\n
这些符号的,可以如下解决
如果读取的文件中是\r\n,需要对其进行处理才能正确读取文件内容。可以使用以下方法将\r\n替换为\n:文章来源:https://www.toymoban.com/news/detail-642034.htmlwith open('filename', 'r') as f: content = f.read() content = content.replace('\r\n', '\n')
具体示例:3D 散点图绘制文章来源地址https://www.toymoban.com/news/detail-642034.html
到了这里,关于JS 读取文件内容的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!