html5写文件到本地
时间: 2024-01-07 12:05:12 浏览: 74
文件上传到本地
在 HTML5 中,可以使用 File API 来读取和写入本地文件。以下是一个简单的示例,演示如何使用 File API 写入文件到本地。
1. HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 File API 示例 - 写入文件</title>
</head>
<body>
<h1>HTML5 File API 示例 - 写入文件</h1>
<input type="file" id="file-input"><br>
<button id="write-button">写入文件</button>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
```
2. JavaScript 代码:
```javascript
// 获取文件输入框和写入按钮
var fileInput = document.getElementById('file-input');
var writeButton = document.getElementById('write-button');
var outputDiv = document.getElementById('output');
// 当用户选择文件时,读取文件内容
fileInput.addEventListener('change', function() {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function() {
outputDiv.innerHTML = reader.result;
};
reader.readAsText(file);
});
// 当用户点击“写入文件”按钮时,将文本内容写入文件
writeButton.addEventListener('click', function() {
var text = outputDiv.innerHTML;
var file = new Blob([text], {type: 'text/plain'});
var a = document.createElement('a');
a.href = URL.createObjectURL(file);
a.download = 'output.txt';
a.click();
});
```
这段代码的作用是:
- 当用户选择一个文本文件时,将文件内容显示在输出框中。
- 当用户点击“写入文件”按钮时,将输出框中的文本内容写入一个名为“output.txt”的文本文件,并将该文件下载到本地。
请注意,该代码仅适用于最新版本的 Chrome、Firefox 和 Edge 浏览器。在其他浏览器中,可能需要做一些修改才能正常工作。
阅读全文