JavaScript代码实现txt文件的上传预览功能

下面是详细讲解 JavaScript 代码实现 txt 文件的上传预览功能的完整攻略。

准备工作

1. HTML 文件中添加一个文件上传的 input 标签，如下：

<input type="file" id="fileInput">

1. 在 HTML 文件中创建一个用于预览文件内容的容器，如下：

<div id="filePreview"></div>

实现步骤

1. 获取上传的文件对象

首先，需要获取上传的文件对象。当用户选择一个文件后，可以通过 input 标签的 onchange 事件获取文件对象，代码如下：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
  const fileObject = e.target.files[0];
  // 执行接下来的步骤
});

2. 读取文件内容

接下来，需要读取文件中的内容。可以使用 FileReader 对象来实现，代码如下：

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
  const fileObject = e.target.files[0];

  // 创建一个 FileReader 对象
  const reader = new FileReader();

  // 设置文件读取完成后的回调函数
  reader.addEventListener('load', function(e) {
    const fileContent = e.target.result;
    // 执行接下来的步骤
  });

  // 开始读取文件
  reader.readAsText(fileObject);
});

在上面的代码中，使用 readAsText 方法读取文件内容。读取完成后，会触发 load 事件，回调函数中的 target.result 属性就是文件的内容。

3. 显示文件内容

最后，需要将文件内容显示在页面上。可以将内容插入到上面创建的容器中，代码如下：

const filePreview = document.getElementById('filePreview');

const fileInput = document.getElementById('fileInput');
fileInput.addEventListener('change', function(e) {
  const fileObject = e.target.files[0];

  const reader = new FileReader();
  reader.addEventListener('load', function(e) {
    const fileContent = e.target.result;

    // 将文件内容插入容器中
    filePreview.innerHTML = fileContent;
  });

  reader.readAsText(fileObject);
});

到这里，就完成了 txt 文件的上传预览功能。

示例

下面提供两个示例，一个是将文件内容以文本框的形式显示，另一个是将文件内容格式化后显示在页面上。

示例一：将文件内容以文本框的形式显示

HTML 代码：

<input type="file" id="fileInput">
<textarea id="filePreview"></textarea>

JavaScript 代码：

const fileInput = document.getElementById('fileInput');
const filePreview = document.getElementById('filePreview');

fileInput.addEventListener('change', function(e) {
  const fileObject = e.target.files[0];

  const reader = new FileReader();
  reader.addEventListener('load', function(e) {
    const fileContent = e.target.result;

    // 将文件内容插入文本框中
    filePreview.value = fileContent;
  });

  reader.readAsText(fileObject);
});

示例二：将文件内容格式化后显示在页面上

HTML 代码：

<input type="file" id="fileInput">
<pre id="filePreview"></pre>

JavaScript 代码：

const fileInput = document.getElementById('fileInput');
const filePreview = document.getElementById('filePreview');

fileInput.addEventListener('change', function(e) {
  const fileObject = e.target.files[0];

  const reader = new FileReader();
  reader.addEventListener('load', function(e) {
    const fileContent = e.target.result;

    // 将文件内容格式化后插入容器中
    const formattedContent = fileContent.replace(/\n/g, '<br>').replace(/\s/g, '&nbsp;');
    filePreview.innerHTML = formattedContent;
  });

  reader.readAsText(fileObject);
});

在上面的代码中，使用正则表达式将换行符和空格进行替换，将文件内容格式化后插入容器中。