如何使用浏览器来操作本地文件系统中的文件呢，相比大家第一时间想到是的input type=“file”来读取文件，然后通过下载来写入文件，对，这是最古老的方式了，他只能上传和下载文件，不能修改和删除本地文件或文件夹呢，随着File system access api的推出，让现代浏览器拥有了像app一样读写本地系统文件的能力。
今天我就来跟大家说说这个新的api怎么用js来编写，主要有三个方法：Window.showOpenFilePicker()、 Window.showSaveFilePicker()和Window.showDirectoryPicker()。
一、js读写浏览器端本地文件和文件夹
1、读取并修改本地文件，通过showOpenFilePicker来弹出一个选择文件的窗口，通过 await fileHandle.getFile()获取文件对象，修改是通过fileHandle.createWritable()来修改保存到本地系统，完整代码如下
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
body{
padding: 10px;
}
</style>
</head>
<body>
<p><button id="openlocalfile">打开本地文件</button>
<button id="savetolocalfile">保存到本地</button>不要在iframe中打开</p>
<textarea id="editor" style="width:100%;height:400px;"></textarea>
<script>
const openbtn = document.getElementById('openlocalfile');
const editor = document.getElementById('editor');
const savebtn = document.getElementById('savetolocalfile');
let fileHandle;
openbtn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
editor.value = contents;
});
savebtn.addEventListener('click', async () => {
if(fileHandle==null){
alert("请先打开一个本地文件后进行修改");
return;
}
const writable = await fileHandle.createWritable();
// 写入文件
await writable.write(editor.value);
// 关闭
await writable.close();
alert("修改本地文件成功");
});
</script>
</body>
</html>
那么如果要另存为呢？这里就要用到window.showSaveFilePicker了，他可以弹出另外为窗口，可以定义默认名称及文档类型描述等，配置如下：
const fileHandle2 = await window.showSaveFilePicker({
suggestedName: 'Uint8ClampedArray.txt',
types: [{
description: '文本文件',
accept: {
'text/plain': ['.txt'],
},
}],
});
完整的打开和另外为文件代码如下：
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
body{
padding: 10px;
}
</style>
</head>
<body>
<p><button id="openlocalfile">打开本地文件</button>
<button id="savetolocalfile">保存到本地</button>不要在iframe中打开</p>
<textarea id="editor" style="width:100%;height:400px;"></textarea>
<script>
const openbtn = document.getElementById('openlocalfile');
const editor = document.getElementById('editor');
const savebtn = document.getElementById('savetolocalfile');
let fileHandle;
openbtn.addEventListener('click', async () => {
[fileHandle] = await window.showOpenFilePicker();
const file = await fileHandle.getFile();
const contents = await file.text();
editor.value = contents;
});
savebtn.addEventListener('click', async () => {
if(fileHandle==null){
alert("请先打开一个本地文件后进行修改");
return;
}
//创建一个另外为
const fileHandle2 = await window.showSaveFilePicker({
suggestedName: 'Uint8ClampedArray.txt',
types: [{
description: '文本文件',
accept: {
'text/plain': ['.txt'],
},
}],
});
const writable = await fileHandle2.createWritable();
// 写入文件
await writable.write(editor.value);
// 关闭
await writable.close();
alert("另存为本地文件成功");
});
</script>
</body>
</html>
那么删除文件呢？删除文件我们在打开目录中讲解。二、js用浏览器打开本地目录
打开一个目录，并获取子目录，这里要用到window.showDirectoryPicker()，他可以返回一个文件夹的句柄。完整代码如下：
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css">
<style>
body{
padding: 10px;
}
</style>
</head>
<body>
<p><button id="openlocalfile">打开本地文件夹</button> 不要在iframe中打开，结果在console中查看
<script>
const openbtn = document.getElementById('openlocalfile');
let dirHandle;
op...点击查看剩余70%
{{collectdata}}
网友评论0