如何在HTML中将.txt文件内容加载到文本框中

你只需要做2处修改就能实现需求，全程无额外依赖，兼容所有主流现代浏览器：

步骤1：添加文件选择相关的HTML元素 #

在你现有SAVE TO FILE按钮的后面，新增以下代码，用来触发文件选择：

<button id="loadBtn">LOAD TXT FILE</button>
<input type="file" id="fileInput" accept=".txt" style="display: none">

其中accept=".txt"限制了只能选择后缀为txt的文件，避免用户选错格式。

步骤2：新增文件读取的JS逻辑 #

在现有所有script标签的末尾新增以下代码即可：

// 绑定加载按钮和文件选择框
const loadBtn = document.getElementById('loadBtn');
const fileInput = document.getElementById('fileInput');
const textbox = document.getElementById('textbox');

loadBtn.addEventListener('click', () => {
  fileInput.click();
});

// 监听文件选择事件，读取文件内容
fileInput.addEventListener('change', (e) => {
  const file = e.target.files[0];
  // 校验文件类型
  if (!file || file.type !== 'text/plain') {
    alert('请选择合法的TXT文件');
    return;
  }
  const reader = new FileReader();
  reader.onload = (e) => {
    // 将读取到的内容写入文本框
    textbox.value = e.target.result;
    // 触发原有重置逻辑，隐藏旧的下载链接
    functionreset();
  };
  reader.readAsText(file);
  // 重置文件选择框，允许重复选择同一个文件
  fileInput.value = '';
});

修改后完整可运行代码 #

（顺便修正了原代码里HTML结构错误，不影响原有功能）

<!DOCTYPE html>
<html>
<head>
    <title>Doc</title>
    <style>
        body
         {
            margin: 0%;
            background: #dcdcdd;
        }
    
        @font-face {
            font-family: "CG";
            src: url(./resources/CENTURYGOTHIC.ttf) format("truetype");
        }

        button {
            background-color: rgb(228, 228, 228);
            font-family: CG;
            border-color: rgb(119, 119, 119);
            border-width: 1px;
            padding-top: 10px;
            padding-bottom: 10px;
            padding-right: 20px;
            padding-left: 20px;
            margin-top: 10px;
            text-transform: capitalize;
        }
    
    
        textarea {
            margin-left: 0%;
            margin-top: 0%;
            height: 80%;
            width: 70%;
            resize: none;
            padding-bottom: 500px;
            padding-left: 0px;
            visibility: visible;
            background-color: rgb(228, 228, 228);
            border-color: rgb(119, 119, 119);
    
        }
    </style>
    <link href='https://fonts.googleapis.com/css?family=Coming Soon' rel='stylesheet'>
    <style>
        body {
            font-family: 'Coming Soon';font-size: 22px;
        }
    </style>
</head>
<body>
    <p style="text-align:left; font-size:50px; color:black;">CocoBread Docs</p>
    <textarea id="textbox" placeholder="Take Notes here and when you are ready to leave the app click the save to txt button"></textarea>
    <br>
    <button id="create">SAVE TO FILE</button>
    <button id="loadBtn">LOAD TXT FILE</button>
    <input type="file" id="fileInput" accept=".txt" style="display: none">
    <a download="Doc.txt" id="downloadlink" style="display: none"><button onclick="functionreset()">DOWNLOAD</button></a>
    <br>
    <script>
        (function() {
            var textFile = null,
                makeTextFile = function(text) {
                    var data = new Blob([text], {
                        type: 'text/plain'
                    });

                    if (textFile !== null) {
                        window.URL.revokeObjectURL(textFile);
                    }

                    textFile = window.URL.createObjectURL(data);

                    return textFile;
                };


            var create = document.getElementById('create'),
                textbox = document.getElementById('textbox');

            create.addEventListener('click', function() {
                var link = document.getElementById('downloadlink');
                link.href = makeTextFile(textbox.value);
                link.style.display = 'block';
                document.getElementById('create').style.display = 'none';
            }, false);
        })();

        function functionreset() {
            var link = document.getElementById('downloadlink');
            link.style.display = 'none';
            document.getElementById('create').style.display = 'block';
        }

    </script>
    <script>
         document.getElementById("textbox").onchange = function() {functionreset()}
    </script>
    <script>
        // 加载本地txt文件逻辑
        const loadBtn = document.getElementById('loadBtn');
        const fileInput = document.getElementById('fileInput');
        const textbox = document.getElementById('textbox');

        loadBtn.addEventListener('click', () => {
            fileInput.click();
        });

        fileInput.addEventListener('change', (e) => {
            const file = e.target.files[0];
            if (!file || file.type !== 'text/plain') {
                alert('请选择合法的TXT文件');
                return;
            }
            const reader = new FileReader();
            reader.onload = (e) => {
                textbox.value = e.target.result;
                functionreset();
            };
            reader.readAsText(file);
            fileInput.value = '';
        });
    </script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Matthys Zondagh