html实现按钮可以打开文件 并且可以编辑和保存的完整代码
时间: 2024-02-20 14:58:21 浏览: 205
下面是一个完整的示例代码,它可以实现打开文件、编辑文件、保存文件的功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>打开、编辑、保存文件</title>
</head>
<body>
<button onclick="openFile()">选择文件</button>
<button onclick="saveFile()">保存</button>
<hr>
</body>
<script>
function openFile() {
var input = document.createElement('input');
input.type = 'file';
input.onchange = function(event) {
var file = event.target.files[0];
loadFile(file);
};
input.click();
}
function loadFile(file) {
var reader = new FileReader();
reader.onload = function(event) {
var content = event.target.result;
var textarea = document.createElement('textarea');
textarea.value = content;
document.body.appendChild(textarea);
};
reader.readAsText(file);
}
function saveFile() {
var textarea = document.querySelector('textarea');
var content = textarea.value;
var blob = new Blob([content], {type: 'text/plain'});
var url = URL.createObjectURL(blob);
var a = document.createElement('a');
a.download = 'filename.txt';
a.href = url;
a.click();
}
</script>
</html>
```
用户点击选择文件按钮后,会打开文件选择器,在选择文件后,文件内容会显示在一个文本区域中。用户可以编辑文件内容,然后点击保存按钮来保存修改后的文件内容。保存后,文件会自动下载到本地。
阅读全文