js如何读取本地文件(js如何读取本地文件数据)

2 02 2 年，如果你想在网页上通过jQuery AJAX方法读取本地txt文件，可以这样做：
HTML部分：
<head> [xss_clean][xss_clean] <脚本类型=“文本/javascript”> $(文档).ready(函数(){ $('b01 ').click(函数(){ var 对象 = $.ajax({ 网址：“test1 .txt”， 异步：假 }); $('myDiv').(obj.responseText); }); }); </脚本> </头> <正文>

通过 AJAX 编辑文本

<button id="b01 " type="button">更改内容</button> </body>
这里的“test1 .txt”URL应该是相对于您的网页文件的本地路径。
例如，如果您的网页和txt文件位于同一目录中，则此路径是正确的。
如果您位于不同的目录中，则需要更改此路径以正确指向您的 txt 文件。

注意：由于现代浏览器的安全限制，正常情况下AJAX无法直接读取用户计算机上的本地文件。
此示例可能仅适用于某些环境（例如运行服务器端的 Node.js 环境）或非标准浏览器。
在标准浏览器中，出于安全考虑，AJAX请求通常只能获取服务器上的资源。

如何利用JavaScript的File System Access API访问本地文件？

上周我尝试了 FileSystemAccessAPI，它非常有趣。

主要步骤如下：
1 ．基本环境要求
HTTPS 或 localhost 都可以
必须由用户点击按钮触发
Chrome 8 6 + 可以运行，但 Safari 不能
2 .读取本地文件
使用showOpenFilePicker()弹出选择框
返回一个FileSystemFileHandle对象
asyncfunctionopenFile() 的写法如下
读取文本文件： 异步函数readJSON(){ const[句柄]=awaitwindow.showOpenFilePicker({ 类型：[{描述：'JSON文件'，接收：{'application/json':['.json']}}] }); constfile=awaithandle.getFile(); constjsonData=JSON.parse(await file.text()); 返回json数据； }
二进制文件： 异步函数readBinary(){ const[句柄]=awaitwindow.showOpenFilePicker({ 类型：[{接收：{'image/':['.png','.jpg']}}] }); constbuffer=awaithandle.getFile().arrayBuffer(); 返回缓冲区； }
读取流式大文件： 异步函数读取大文件（）{ const[句柄]=awaitwindow.showOpenFilePicker(); conststream=awaithandle.getFile().stream(); constreader=stream.getReader(); 而（真）{ const{完成，值}=awaitreader.read(); 如果（完成）中断； //处理数据块 }
3 将文件保存到本地 异步函数保存文件（内容）{ 尝试{ conshandle=awaitwindow.showSaveFilePicker({ suggestName:'document.txt', 类型：[{描述：'文本文件'，接受：{'text/plain'：['.txt']}}] }); constwritable=awaithandle.createWritable(); 等待可写。
写入（内容）； 等待可写。
关闭（）； }捕获（错误）{ console.error("保存失败:",err); }
4 兼容性处理 if('showOpenFilePicker'inwindow){ //支持新版本的API }其他{ // 降级计划 alert('请使用Chrome8 6 +或Edge'); document.getElementById('fallbackInput').style.display='block'; }
降级计划： <input type="file" id="fallbackInput" style="display:none;"> <脚本> document.getElementById('fallbackInput').addEventListener('change',(e)=> { constfile=e.target.files[0]; constreader=newFileReader(); reader.onload=(e)=> console.log(e.target.result); reader.readAsText(文件); }); </脚本>
5 主要需要注意的是
搬运管理需谨慎
使用queryPermission()进行权限检查
各种错误都要抓一下
总体感觉还可以。
但需要用户主动触发。
没关系，这取决于你。