html 本地文件追加写入
时间: 2023-10-10 13:07:59 浏览: 98
追加文件内容
5星 · 资源好评率100%
可以通过 JavaScript 和 HTML5 的 File API 实现对本地文件的追加写入操作。以下是一个简单的示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>本地文件追加写入示例</title>
<meta charset="UTF-8">
<script type="text/javascript">
function appendToFile() {
// 获取文件输入框和内容输入框
var fileInput = document.getElementById("fileInput");
var contentInput = document.getElementById("contentInput");
// 获取选择的文件对象
var file = fileInput.files[0];
// 创建 FileReader 对象
var reader = new FileReader();
// 文件读取完成后执行的回调函数
reader.onload = function(event) {
// 获取文件内容并添加新的内容
var content = event.target.result + "\n" + contentInput.value;
// 创建 Blob 对象
var blob = new Blob([content], {type: "text/plain"});
// 创建 FileWriter 对象
var writer = new FileWriter(file, {position: file.size});
// 写入文件
writer.write(blob);
};
// 读取文件内容
reader.readAsText(file);
}
</script>
</head>
<body>
<input type="file" id="fileInput"><br>
<textarea id="contentInput"></textarea><br>
<button onclick="appendToFile()">追加写入</button>
</body>
</html>
```
该示例中,用户可以选择一个本地文件和输入要追加的内容,然后点击“追加写入”按钮即可将内容追加写入到选定的文件中。需要注意的是,该实现方式需要在支持 HTML5 的浏览器中才能正常工作。
阅读全文