上传文件夹，获取内部所有文件名，并单击复制

最新推荐文章于 2024-09-08 13:13:25 发布

YAGE_lion

最新推荐文章于 2024-09-08 13:13:25 发布

阅读量36

点赞数

文章标签： html5 javascript

本文链接：https://blog.csdn.net/wgcwgc1004/article/details/134754052

版权

复制文件名称的过程很麻烦，开发了一个小demo，直接上传文件夹，点击获取所有文件，并且直接点按钮复制。

并且基于浏览器环境开发，任何人都可以拉下来直接用的代码。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>复制文件名</title>
</head>
<body>
  <input type="file" id="folderInput" webkitdirectory directory>
  <ul id="fileList"></ul>

  <script>
    function displayFileList(files) {
      const fileList = document.getElementById('fileList');
      fileList.innerHTML = ''; // 清空之前的列表

      // 将类数组对象转换为数组
      const filesArray = Array.from(files);

      filesArray.forEach(file => {
        const listItem = document.createElement('li');
        listItem.textContent = file.name;

        // 创建按钮
        const copyButton = document.createElement('button');
        copyButton.textContent = 'Copy';
        copyButton.addEventListener('click', () => {
          copyFileName(file.name);
        });

        // 将按钮添加到列表项中
        listItem.appendChild(copyButton);

        fileList.appendChild(listItem);
      });
    }

    function copyFileName(fileName) {
      // 复制文件名到剪贴板
      navigator.clipboard.writeText(fileName)
        .then(() => console.log(`File name "${fileName}" copied to clipboard!`))
        .catch(error => console.error(`Error copying file name: ${error.message}`));
    }

    // 监听文件夹输入框的变化
    const folderInput = document.getElementById('folderInput');
    folderInput.addEventListener('change', (event) => {
      const files = event.target.files;
      displayFileList(files);
    });
  </script>
</body>
</html>