JavaScript如何在前端代码中读、写本地文件_Javascript

一，在前端代码javascript中读写文件的限制与处理

在前端 javascript 中，浏览器环境没有直接提供操作文件系统的能力。也就是说，你不能像在 node.js 环境中那样，使用 fs 模块来删除或创建文件。这是因为浏览器出于安全性的考虑，不允许网页随意访问用户的文件系统，以防止潜在的恶意行为。

然而，浏览器确实提供了一些有限的文件操作能力，主要是通过以下几种方式：

1，文件上传和下载

- 文件上传: 可以通过 <input type="file"> 元素让用户选择文件，然后通过 javascript 读取文件内容。
- 文件下载: 可以通过创建 blob 对象和使用 a 标签的 download 属性来触发文件下载。

2，file api

2，file system access api

- file system access api 是现代浏览器（主要是在 chromium 内核的浏览器）引入的一种新 api，它允许网页直接与用户的文件系统交互，创建、读取、写入和删除文件。这是当前浏览器提供的最接近文件系统操作的能力。

二，读文件

（一）最简单方式

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读文件</title>
</head>
<body>
<input type="file" id="fileinput">
<button id="processbutton">process and download</button>

<script>
    document.getelementbyid('processbutton').addeventlistener('click', function () {
        const fileinput = document.getelementbyid('fileinput');
        const file = fileinput.files[0];

        if (file) {
            const reader = new filereader();

            reader.onload = function (e) {
                // 读取文件内容
                let content = e.target.result;
                console.log(content);
            };

            // 开始读取文件
            reader.readastext(file);
        } else {
            alert('please select a file first!');
        }
    });
</script>
</body>
</html>

html 部分：

- 我们创建了一个文件输入框 (<input type="file">) 让用户选择文件。

javascript 部分：

- 我们创建了一个 filereader 对象来读取选中的文件。
- 使用 reader.onload 指定成功读取文件时要做什么。
- 使用 reader.readastext(file) 开始以文本形式读取文件。

（二）读取大文件

在上面的代码中，文件的读取是通过 filereader 的 readastext() 方法完成的。这个方法确实会一次性将整个文件内容加载到内存中。对于小型文件来说这没有问题，但如果文件非常大，可能会导致内存占用过高，影响性能，甚至导致页面崩溃。

1，分片读取

使用 filereader 的 readasarraybuffer() 方法，然后使用 blob 的 slice() 方法来分块读取文件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>读文件</title>
</head>
<body>
<input type="file" id="fileinput">
<button id="processbutton">process</button>

<script>
    document.getelementbyid('processbutton').addeventlistener('click', function () {
        const fileinput = document.getelementbyid('fileinput');
        const file = fileinput.files[0];

        if (file) {
            const chunk_size = 1024 * 1024; // 1mb 分块大小
            let offset = 0;

            // 递归读取文件的函数
            function readnextchunk() {
                // 检查是否已经读取到文件末尾
                if (offset >= file.size) {
                    console.log("file processing complete.");
                    return;
                }

                // 读取当前块
                const chunk = file.slice(offset, offset + chunk_size);
                const reader = new filereader();

                reader.onload = function (e) {
                    // 处理当前块的数据
                    let content = e.target.result;
                    console.log(`processing chunk from ${offset} to ${offset + chunk_size}`);
                    console.log(content); // 此处可以进行更复杂的处理

                    // 更新偏移量，并读取下一块
                    offset += chunk_size;
                    readnextchunk();
                };

                reader.onerror = function (e) {
                    console.error("error reading file chunk:", e);
                };

                // 开始读取当前块
                reader.readastext(chunk);
            }

            // 开始读取第一个块
            readnextchunk();
        } else {
            alert('please select a file first!');
        }
    });
</script>
</body>
</html>

由于文件读取是异步操作，递归调用 readnextchunk() 在每块数据处理完成后继续下一块处理。

2，使用 stream

使用 file api 的 stream() 方法（在较新的浏览器中支持），这允许你以流的方式读取文件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>stream read file</title>
</head>
<body>
<input type="file" id="fileinput">
<button id="processbutton">process file stream</button>

<script>
    document.getelementbyid('processbutton').addeventlistener('click', async function () {
        const fileinput = document.getelementbyid('fileinput');
        const file = fileinput.files[0];

        if (file) {
            const stream = file.stream();
            const reader = stream.getreader();

            // 读取流数据
            async function read() {
                let result;
                while (!(result = await reader.read()).done) {
                    const chunk = result.value; // uint8array
                    const textchunk = new textdecoder().decode(chunk); // 转换为文本

                    console.log(textchunk); // 处理数据块
                }

                console.log("file processing complete.");
            }

            // 开始读取
            read().catch(error => console.error("stream read error:", error));
        } else {
            alert('please select a file first!');
        }
    });
</script>
</body>
</html>、

file.stream(): 这是 file 对象的新方法，返回一个 readablestream，用于读取文件内容。
stream.getreader(): 通过调用 stream.getreader() 获取流的读取器，返回 readablestreamdefaultreader 对象。
reader.read(): 每次调用 reader.read() 方法，读取流中的一个块数据，返回一个 promise，该 promise 解析为一个对象，包含 done 和 value 属性。
- done: 如果为 true，表示流已读取完毕。
- value: 当前读取的数据块，以 uint8array 的形式返回。
textdecoder: 用于将 uint8array 数据块转换为可读的文本。对于非文本数据，可以根据需要进行其他处理。
while 循环: 通过 while 循环不断读取文件流，直到流结束。
通过 async/await 和 promises 实现简洁的异步文件读取逻辑。

（三）前端代码读取本地文件需要注意的地方

1，安全性问题

问题: 浏览器出于安全考虑，限制了对用户文件系统的直接访问，以防止恶意脚本未经用户同意访问敏感文件或数据。前端代码只能通过用户明确选择的方式访问文件，比如通过 <input type="file"> 或 file system access api。

处理方法:

用户明确选择: 必须通过文件选择对话框（如 <input type="file">）让用户主动选择文件，而不是让脚本直接访问。
```
<input type="file" id="fileinput">
```
文件处理的权限: 使用 file system access api（如 showopenfilepicker()）时，浏览器会明确向用户请求权限。确保只在必要时请求最少的权限。

async function selectfile() {
  const [filehandle] = await window.showopenfilepicker();
  const file = await filehandle.getfile();
  console.log(file.name);
}

保持权限范围最小化: 只请求需要的文件或目录，不尝试访问整个文件系统。限制操作的范围，例如只允许读取，避免写入或删除操作。

2，隐私问题

问题: 用户文件可能包含敏感信息，如个人数据、财务信息等。前端读取文件时，必须确保用户的隐私不被泄露或滥用。

处理方法:

透明度: 明确告知用户文件将被读取的内容和目的，避免在用户不知情的情况下读取数据。

本地处理: 尽量在本地处理文件内容，避免将数据上传到服务器或发送到第三方服务，除非获得用户明确同意。

const reader = new filereader();
reader.onload = function(e) {
  const content = e.target.result;
  // 只在本地处理数据
};
reader.readastext(file);

数据清理: 如果需要将文件内容传输到服务器，确保对敏感数据进行加密，并在处理完毕后清理不再需要的数据。

3，性能问题

题: 在前端处理大文件时，可能会导致浏览器内存占用过高或卡顿，影响用户体验。

处理方法:

分块处理: 对于大文件，使用 file api 的 slice() 方法或 stream() 方法将文件分块读取，逐步处理文件内容，避免一次性将整个文件加载到内存中。

const chunk_size = 1024 * 1024; // 1mb
let offset = 0;

function readchunk(file) {
  const chunk = file.slice(offset, offset + chunk_size);
  const reader = new filereader();
  reader.onload = function(e) {
    const content = e.target.result;
    console.log(content); // 处理数据块
    offset += chunk_size;
    if (offset < file.size) {
      readchunk(file); // 继续读取下一块
    }
  };
  reader.readastext(chunk);
}

异步操作: 使用 async/await 或 promises 处理文件读取，以避免阻塞主线程，确保页面保持响应性。

4，兼容性问题

并非所有浏览器都支持最新的 file system access api 或某些高级文件处理功能。需要确保代码在多个浏览器中都能正常工作，或者提供合理的回退机制。

问题: 并非所有浏览器都支持最新的 file system access api 或某些高级文件处理功能。需要确保代码在多个浏览器中都能正常工作，或者提供合理的回退机制。

处理方法:

feature detection: 在使用某些文件 api 之前，检查浏览器是否支持该功能。使用 if 语句检查是否存在特定 api。
```
if (window.showopenfilepicker) {
  // 使用 file system access api
} else {
  // 回退到 <input type="file">
}
```

5，用户体验问题

问题: 前端文件操作通常涉及用户选择文件、上传文件、下载文件等操作，良好的用户体验可以提升用户的满意度。

处理方法:

进度指示: 在处理大文件时，显示进度指示器（如进度条），让用户了解文件处理进度，避免用户感觉应用卡死。

<progress id="progressbar" value="0" max="100"></progress>	

// 在读取文件块时更新进度条
progressbar.value = (offset / file.size) * 100;

错误处理: 提供友好的错误提示和处理机制，帮助用户理解问题并采取行动（如重新选择文件）。
```
reader.onerror = function(e) {
  alert('error reading file: ' + e.target.error.message);
};
```
反馈和确认: 当文件操作成功完成时，给用户反馈，例如提示文件处理完毕，或确认下载已完成。

6，权限管理问题

问题: 文件操作可能涉及权限问题，例如通过 file system access api 访问文件系统时，权限可能会被撤销。

处理方法:

权限检查: 每次操作前，检查是否仍有权限访问文件或目录。如果权限被撤销，提示用户重新授权。
```
const permission = await filehandle.querypermission();
if (permission !== 'granted') {
  // 提示用户重新授权
}
```

权限请求: 如果没有权限，可以使用 requestpermission() 方法主动请求权限。

const permission = await filehandle.requestpermission();
if (permission === 'granted') {
  // 执行文件操作
}

7，文件类型和内容验证

问题: 用户可能会选择错误类型的文件，或上传包含恶意内容的文件。

处理方法:

文件类型过滤: 使用 <input type="file"> 元素的 accept 属性限制用户选择的文件类型。例如，限制只选择 .txt 文件。
```
<input type="file" accept=".txt">
```
内容验证: 在处理文件内容之前，验证文件的实际内容格式。例如，如果文件是 json 格式，可以尝试解析内容并捕获错误。
```
try {
  const data = json.parse(filecontent);
} catch (e) {
  alert('invalid json format');
}
```

8，文件大小限制

问题: 处理非常大的文件可能会导致内存溢出或性能问题。

处理方法:

限制文件大小: 在前端代码中设置文件大小限制，并在用户选择文件时进行检查。如果文件过大，给出提示。
```
const max_size = 10 * 1024 * 1024; // 10mb
if (file.size > max_size) {
  alert('file is too large!');
  return;
}
```

这里举个例子🌰：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件处理</title>
</head>
<body>
<input type="file" id="fileinput" accept=".pdf">
<button id="processbutton">process</button>
<progress id="progressbar" value="0" max="100" style="display: none;"></progress>
<p id="percentage">0%</p>
<p id="statusmessage"></p>

<script>
    document.getelementbyid('processbutton').addeventlistener('click', function () {
        const fileinput = document.getelementbyid('fileinput');
        const file = fileinput.files[0];
        const max_size = 300 * 1024 * 1024; // 最大300mb
        const progressbar = document.getelementbyid('progressbar');
        const percentagedisplay = document.getelementbyid('percentage');
        const statusmessage = document.getelementbyid('statusmessage');

        // 重置状态
        progressbar.style.display = 'none';
        progressbar.value = 0;
        percentagedisplay.textcontent = '0%';
        statusmessage.textcontent = '';

        // 检查是否选择了文件
        if (!file) {
            alert('please select a file first!');
            return;
        }

        // 检查文件大小
        if (file.size > max_size) {
            alert('file is too large! please select a file under 300mb.');
            return;
        }

        console.log(`selected file: ${file.name}, ${file.size} bytes, ${file.type}`);
        // // 检查文件类型（假设只接受文本文件）
        // if (file.type !== "text/plain") {
        //     alert('invalid file type! please select a .pdf file.');
        //     return;
        // }

        const chunk_size = 1024 * 1024; // 1mb 分块大小
        let offset = 0;

        // 显示进度条
        progressbar.style.display = 'block';

        // 递归读取文件的函数
        function readnextchunk() {
            // 检查是否已经读取到文件末尾
            if (offset >= file.size) {
                statusmessage.textcontent = "file processing complete.";
                progressbar.style.display = 'none';
                return;
            }

            // 读取当前块
            const chunk = file.slice(offset, offset + chunk_size);
            const reader = new filereader();

            reader.onload = function (e) {
                // 处理当前块的数据
                let content = e.target.result;
                console.log(`processing chunk from ${offset} to ${offset + chunk_size}`);
                console.log(content); // 此处可以进行更复杂的处理

                // 更新偏移量，并读取下一块
                offset += chunk_size;

                // 计算百分比并更新显示
                const percentage = math.min((offset / file.size) * 100, 100).tofixed(2);
                progressbar.value = percentage;
                percentagedisplay.textcontent = `${percentage}%`;

                readnextchunk();
            };

            reader.onerror = function (e) {
                console.error("error reading file chunk:", e);
                statusmessage.textcontent = "error reading file!";
                progressbar.style.display = 'none';
            };

            // 开始读取当前块
            reader.readastext(chunk);
        }

        // 开始读取第一个块
        readnextchunk();
    });
</script>
</body>
</html>

三，写文件

在前端代码中将信息写入本地文件是一个常见的需求，但由于浏览器的安全限制，这个过程并不像在后端那样直接。我们有几种方法可以实现这个功能，每种方法都有其优缺点。

（一）最常用的方法

最常用的方法时使用 blob 和 url.createobjecturl()。

function savetofile(content, filename) {
    const blob = new blob([content], { type: 'text/plain' });
    const url = url.createobjecturl(blob);
    
    const link = document.createelement('a');
    link.href = url;
    link.download = filename;
    
    // 这行是必要的，用于在浏览器中触发下载
    document.body.appendchild(link);
    
    link.click();
    
    // 清理并移除链接
    document.body.removechild(link);
    url.revokeobjecturl(url);
}

// 使用示例
savetofile('hello, world!', 'example.txt');

优点：

广泛支持，适用于大多数现代浏览器。
可以处理大文件。
可以保存各种类型的数据（不仅仅是文本）。

缺点：

用户需要选择保存位置，无法直接写入特定位置。
不能追加内容到现有文件。

（二）使用 file system access api

这是一个较新的api，提供了更强大的文件操作能力，但目前只有部分现代浏览器支持。

async function writetofile(content) {
    if ('showsavefilepicker' in window) {
        try {
            const handle = await window.showsavefilepicker({
                types: [{
                    description: 'text file',
                    accept: { 'text/plain': ['.txt'] },
                }],
            });
            const writable = await handle.createwritable();
            await writable.write(content);
            await writable.close();
            console.log('file saved successfully');
        } catch (err) {
            console.error('error saving file:', err);
        }
    } else {
        console.error('file system access api not supported');
    }
}

// 使用示例
writetofile('hello, world!');

优点：

提供更强大的文件操作能力，包括读取、写入和修改文件。
可以访问用户选择的文件或目录。
支持大文件和流式操作。

缺点：

浏览器支持有限，主要是新版chrome和edge。
需要用户明确授予权限。

（三）使用 localstorage 或 indexeddb

这些方法不是直接将数据保存为文件，而是将数据存储在浏览器的本地存储中。

对于 localstorage：

function savetolocalstorage(key, value) {
    localstorage.setitem(key, value);
}

// 使用示例
savetolocalstorage('mydata', 'hello, world!');

对于 indexeddb，代码会相对复杂一些，这里是一个简化的例子：

let db;
const dbname = "mydatabase";

const request = indexeddb.open(dbname, 1);

request.onerror = function(event) {
    console.error("database error: " + event.target.error);
};

request.onsuccess = function(event) {
    db = event.target.result;
    console.log("database opened successfully");
};

request.onupgradeneeded = function(event) {
    db = event.target.result;
    const objectstore = db.createobjectstore("files", { keypath: "id" });
};

function savetoindexeddb(id, content) {
    const transaction = db.transaction(["files"], "readwrite");
    const objectstore = transaction.objectstore("files");
    const request = objectstore.put({ id: id, content: content });
    
    request.onerror = function(event) {
        console.error("error saving data: " + event.target.error);
    };
    
    request.onsuccess = function(event) {
        console.log("data saved successfully");
    };
}

// 使用示例（需要在数据库打开后调用）
savetoindexeddb('file1', 'hello, world!');

优点：

不需要用户交互就能保存数据。
数据持久化存储在浏览器中。
适用于存储应用程序状态或小型数据集。

缺点：

存储容量有限（localstorage通常限制为5mb左右）。
数据只存储在浏览器中，不是真正的文件。
用户清除浏览器数据时会丢失。

一个完整的示例🌰：

<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件保存示例</title>
    <style>
        body {
            font-family: arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        textarea {
            width: 100%;
            height: 100px;
            margin-bottom: 10px;
        }

        button {
            margin-right: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
<h1>文件保存示例</h1>
<textarea id="content" placeholder="在此输入要保存的内容"></textarea>
<div>
    <button onclick="saveusingblob()">使用blob下载</button>
    <button onclick="saveusingfilesystem()">使用file system api保存</button>
    <button onclick="savetolocalstorage()">保存到localstorage</button>
    <button onclick="savetoindexeddb()">保存到indexeddb</button>
</div>
<div id="status"></div>

<script>
    // 使用blob和url.createobjecturl()方法
    function saveusingblob() {
        const content = document.getelementbyid('content').value;
        const blob = new blob([content], {type: 'text/plain'});
        const url = url.createobjecturl(blob);

        const link = document.createelement('a');
        link.href = url;
        link.download = 'example.txt';

        document.body.appendchild(link);
        link.click();

        document.body.removechild(link);
        url.revokeobjecturl(url);

        updatestatus('文件已准备下载');
    }

    // 使用file system access api
    async function saveusingfilesystem() {
        const content = document.getelementbyid('content').value;
        if ('showsavefilepicker' in window) {
            try {
                const handle = await window.showsavefilepicker({
                    types: [{
                        description: 'text file',
                        accept: {'text/plain': ['.txt']},
                    }],
                });
                const writable = await handle.createwritable();
                await writable.write(content);
                await writable.close();
                updatestatus('文件保存成功');
            } catch (err) {
                updatestatus('保存文件时出错: ' + err);
            }
        } else {
            updatestatus('此浏览器不支持file system access api');
        }
    }

    // 使用localstorage
    function savetolocalstorage() {
        const content = document.getelementbyid('content').value;
        try {
            localstorage.setitem('savedcontent', content);
            updatestatus('内容已保存到localstorage');
        } catch (err) {
            updatestatus('保存到localstorage时出错: ' + err);
        }
    }

    // 使用indexeddb
    let db;
    const dbname = "mydatabase";
    const dbversion = 1;

    const request = indexeddb.open(dbname, dbversion);

    request.onerror = function (event) {
        updatestatus("打开数据库时出错: " + event.target.error);
    };

    request.onsuccess = function (event) {
        db = event.target.result;
        updatestatus("数据库已成功打开");
    };

    request.onupgradeneeded = function (event) {
        db = event.target.result;
        const objectstore = db.createobjectstore("files", {keypath: "id"});
        updatestatus("数据库已创建");
    };

    function savetoindexeddb() {
        const content = document.getelementbyid('content').value;
        if (!db) {
            updatestatus("数据库未准备好");
            return;
        }
        const transaction = db.transaction(["files"], "readwrite");
        const objectstore = transaction.objectstore("files");
        const request = objectstore.put({id: "file1", content: content});

        request.onerror = function (event) {
            updatestatus("保存到indexeddb时出错: " + event.target.error);
        };

        request.onsuccess = function (event) {
            updatestatus("内容已成功保存到indexeddb");
        };
    }

    function updatestatus(message) {
        document.getelementbyid('status').textcontent = message;
    }
</script>
</body>
</html>