📌  相关文章
📜  如何使用输入类型文件并在屏幕上显示所选文件 - Javascript (1)

📅  最后修改于: 2023-12-03 15:38:08.723000             🧑  作者: Mango

如何使用输入类型文件并在屏幕上显示所选文件 - Javascript

在Javascript中，我们可以通过input类型的file来实现选择本地文件并在屏幕上显示其内容的功能。本文将介绍如何使用该功能。

HTML代码

首先，在HTML中需要创建一个input元素，并将其类型设置为file。此外，我们还需要添加一个用于显示文件内容的空元素。

<!DOCTYPE html>
<html>
  <head>
    <title>Input type file example</title>
  </head>
  <body>
    <input type="file" id="file-input">
    <div id="file-content"></div>
  </body>
</html>
Javascript代码

接下来，在Javascript中，我们需要为文件选择框添加一个change事件监听器。当用户选择文件后，我们可以通过FileReader对象读取该文件的内容，并将其显示在页面上。

const fileInput = document.getElementById('file-input');
const fileContent = document.getElementById('file-content');

fileInput.addEventListener('change', (event) => {
  const file = event.target.files[0];
  const reader = new FileReader();

  reader.onload = () => {
    fileContent.innerText = reader.result;
  };

  reader.readAsText(file);
});

在上述代码中，我们首先通过getElementById获取到file-input和file-content元素。然后，我们为file-input添加了一个change事件监听器，当用户选择文件后，该事件将被触发。

在事件处理程序中，我们首先通过event.target.files获取到用户选择的文件。然后，我们创建了一个FileReader对象，通过调用其readAsText方法读取该文件的内容。最后，当文件内容读取完成后，我们将其显示在file-content元素上。

测试

现在，我们可以通过运行上述代码并选择一个本地文件，来测试该功能是否正常。

总结

本文介绍了如何使用input类型的file来实现选择本地文件并在屏幕上显示其内容的功能。

具体来说，我们首先在HTML中创建了一个file-input元素和一个用于显示文件内容的file-content元素。然后，在Javascript中，我们为file-input添加了一个change事件监听器，当用户选择文件后，我们使用FileReader对象读取该文件的内容，并将其显示在file-content元素上。

希望本文能够帮助大家学习Javascript中的文件操作。