js 获取本地文件及目录的方法(推荐)

2023年5月27日上午6:00 • JavaScript

当我们需要在JavaScript中获取本地文件或目录时，可以通过File API实现。File API是一组用于读取本地文件的JavaScript接口。

下面是使用File API获取本地文件及目录的步骤：

1. 创建一个input元素

<input type="file" id="input-element">

这将创建一个包含文件选择器的输入元素。用户可以通过单击该元素将其计算机上的文件上传到服务器。

2. 监听用户选择的文件

const inputElement = document.querySelector('#input-element');

inputElement.addEventListener('change', (event) => {
  const file = event.target.files[0];
  console.log(file);
});

在文件选择器中选择文件时，会触发“change”事件。我们可以使用addEventListener()方法为输入元素添加事件监听器。在监听器函数中，我们可以使用File对象的方法和属性来获取所选文件的详细信息。 event.target.files[0] 返回的是FileList对象，因此我们需要直接访问他的第一个元素。

3. 读取文件内容

const inputElement = document.querySelector('#input-element');

inputElement.addEventListener('change', (event) => {
  const file = event.target.files[0];

  const reader = new FileReader();

  reader.onload = () => {
    console.log(reader.result);
  };

  reader.readAsText(file);
});

上面的代码可以读取用户选择的文件并将其内容打印到控制台。FileReader是一个用于读取文件的JavaScript API。使用readAsText()方法以文本格式读取文件。文件读取完成后，将触发load事件，我们可以在该事件的处理程序中访问文件内容。

示例1：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>File API 示例1</title>
</head>
<body>
    <input type="file" id="input-element">
    <script>
        const inputElement = document.querySelector('#input-element');

        inputElement.addEventListener('change', (event) => {
            const file = event.target.files[0];

            const reader = new FileReader();

            reader.onload = () => {
                console.log(reader.result);
                alert(reader.result);
            };

            reader.readAsText(file);
        });
    </script>
</body>
</html>

上面的代码将创建一个包含文件选择器的输入元素。当用户选择文件时，它将在控制台和弹出窗口中打印文件的内容。

示例2：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>File API 示例2</title>
</head>
<body>
    <input type="file" id="input-element">
    <ul id="file-list"></ul>
    <script>
        const inputElement = document.querySelector('#input-element');
        const fileList = document.querySelector('#file-list');

        inputElement.addEventListener('change', (event) => {
            const files = event.target.files;

            for (let i = 0; i < files.length; i++) {
                const li = document.createElement('li');
                const file = files[i];

                li.textContent = `${file.name} (${file.type}) - ${file.size} bytes`;

                fileList.appendChild(li);
            }
        });
    </script>
</body>
</html>

上面的代码将创建一个包含文件选择器的输入元素和一个无序列表元素。当用户选择文件时，我们将为每个文件创建一个列表项，并将其添加到无序列表中。每个列表项都包含文件的名称、类型和大小。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：js 获取本地文件及目录的方法(推荐) - Python技术站