html实现按钮可以打开文件 并且可以编辑和保存

要实现这个功能，可以使用HTML5的File API和一些JavaScript代码。

首先，在HTML中创建一个按钮来触发文件选择器：

<button onclick="openFile()">选择文件</button>

然后，在JavaScript中实现openFile()函数，用来打开文件选择器并获取选中的文件：

function openFile() {
  var input = document.createElement('input');
  input.type = 'file';
  input.onchange = function(event) {
    var file = event.target.files[0];
    loadFile(file);
  };
  input.click();
}

接下来，实现loadFile()函数来读取文件内容并显示在页面上：

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);
}

现在，用户选择文件后，文件内容将会显示在一个文本区域中。

最后，添加一个保存按钮来允许用户保存修改后的文件内容：

<button onclick="saveFile()">保存</button>

实现saveFile()函数来将修改后的内容保存回原文件：

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();
}

这个函数将修改后的内容保存为一个新的Blob对象，然后创建一个下载链接并模拟点击下载链接来保存文件。