文本框实现打开保存另存为
时间: 2023-12-20 22:07:18 浏览: 25
文本框的打开、保存和另存为功能可以通过 HTML5 中的 File API 来实现。
首先,我们需要在 HTML 中创建一个文本框和操作按钮:
```html
<textarea id="myTextarea"></textarea>
<button onclick="openFile()">打开</button>
<button onclick="saveFile()">保存</button>
<button onclick="saveFileAs()">另存为</button>
```
然后,在 JavaScript 中,我们可以定义以下函数来实现这些操作:
```javascript
// 打开文件
function openFile() {
// 创建一个文件输入框
var inputFile = document.createElement("input");
inputFile.type = "file";
// 当文件被选择时
inputFile.onchange = function() {
// 读取文件内容
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById("myTextarea").value = e.target.result;
};
reader.readAsText(file);
};
// 触发文件选择对话框
inputFile.click();
}
// 保存文件
function saveFile() {
var content = document.getElementById("myTextarea").value;
var file = new Blob([content], {type: "text/plain"});
var url = URL.createObjectURL(file);
// 创建一个下载链接
var a = document.createElement("a");
a.href = url;
a.download = "myFile.txt";
a.click();
}
// 另存为文件
function saveFileAs() {
var content = document.getElementById("myTextarea").value;
var file = new Blob([content], {type: "text/plain"});
var url = URL.createObjectURL(file);
// 创建一个文件输入框
var inputFile = document.createElement("input");
inputFile.type = "file";
inputFile.accept = "text/plain";
inputFile.onchange = function() {
// 保存文件到本地
var file = this.files[0];
var a = document.createElement("a");
a.href = url;
a.download = file.name;
a.click();
};
inputFile.click();
}
```
以上代码实现了打开、保存和另存为功能。需要注意的是,在保存和另存为操作中,我们都是先创建了一个 Blob 对象,然后通过 URL.createObjectURL() 方法生成一个下载链接,最后触发了链接的点击事件以实现文件下载。