btn 单击单击文件 JavaScript

介绍

本文将为程序员介绍如何使用 JavaScript 实现通过按钮单击选择文件并获取文件内容的功能。

主要思路

• 在 HTML 中定义一个按钮，通过单击按钮触发事件；
• 通过 JavaScript 获取 input 标签，为其添加 onchange 事件，监听文件选择是否发生变化；
• 获取选中的文件内容。

实现步骤

HTML

在 HTML 中定义一个按钮和一个 input 标签，通过 id 属性获取 input 标签。

<button id="btn">选择文件</button>
<input type="file" id="file" />

JavaScript

通过 JavaScript 获取按钮和 input 标签，为按钮添加 onclick 事件，为 input 标签添加 onchange 事件。

const btn = document.getElementById("btn");
const file = document.getElementById("file");

btn.onclick = function () {
  file.click();
};

file.onchange = function () {
  const selectedFile = file.files[0];
  const reader = new FileReader();

  reader.readAsText(selectedFile);

  reader.onload = function (e) {
    const fileContent = e.target.result;
    console.log(fileContent);
  };
};

在 onchange 事件中，首先获取选中的文件，然后使用 FileReader 方法将文件读取为文本，并在读取完成后获取文件内容。

总结

通过以上代码片段，可以在网页中实现以按钮单击选择文件并获取文件内容的功能。程序员可按需进行修改和拓展，实现更多实用功能。