自动读取
对于安全原因，JavaScript 不允许自动读取本地文件系统中的文件，需要用户手动选择本地文件后进行读取操作。
// 创建一个 XMLHttpRequest 对象
var xhr =newXMLHttpRequest();// 指定读取 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文件内容：
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>读取本地文件内容</title></head><body><inputtype="file"id="inputfile"/><buttononclick="readFile()">读取文件</button><splashesv-if="activeKey === '7'":chart-data="chartData"/><script>functionreadFile(){var file = document.getElementById('inputfile').files[0];// 获取选择的文件if(!file)return;var reader =newFileReader();
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：with open('filename','r') as f: content = f.read() content = content.replace('\r\n','\n')
具体示例：3D 散点图绘制
本文转载自: https://blog.csdn.net/qq_53810245/article/details/130594283
版权归原作者 博客zhu虎康 所有， 如有侵权，请联系我们删除。
版权归原作者 博客zhu虎康 所有， 如有侵权，请联系我们删除。