在JavaScript中获取ZIP文件中文件的名称

Question

在我的应用程序中，我有一个带有一些字段和一个“输入文件”字段的表单，一旦用户上传了一个“zip文件”，我想获取包含在该“zip文件”中的文件名。

这是表单：

<input type="text" name="code" value="CodeValue">
<input type="text" name="Comment" value="commentValue">
<input type="file" name="zipFile" value="zipValue" accept="application/zip" 
       onchange="getzipFilesNames();" id="file-input">

<script>
    function getzipFilesNames() {

    }
</script>

我不需要提取文件，只需要它们的名称。如何使用javascript实现这一目标？

- ihssan

Answer 1

我使用JSUnzip库和JSInflate库找到了一个简单的方法来实现它：以下是示例代码：

JSUnzip 和 JSInflate 库会帮助你轻松实现。

        var filesInput = document.getElementById("file-input").files[0];
        var res;

        var reader = new FileReader();
        reader.readAsBinaryString(filesInput);

        reader.onloadend = function(e){
            var myZip = e.target.result;                 
            var unzipper = new JSUnzip(myZip);

            unzipper.readEntries();    
            var myFiles = unzipper.entries;    

            for(var i=0; i<myFiles.length; i++) {
                var name = myFiles[i].fileName; // This is the file name
                var content = JSInflate.inflate(myFiles[i].data); // this is the content of the files within the zip file.
            }
        }   

- ihssan

---

请纠正我，但这需要加载整个zip文件。有没有一种方法可以仅获取文件列表而不加载整个文件，无论是通过仅读取文件的初始部分（假设在开头有内容列表），还是通过分块读取zip文件？ - Max Waterman

Answer 2

JSUnzip和JSInflate已不再维护。我使用jszip读取大型zip文件的文件名时出现问题，因为jszip不支持超过2GB的文件，根据其维护者说法。

我找到了一种使用zip.js读取zip内容文件名的方法：

import { BlobReader, ZipReader } from "@zip.js/zip.js";

async function getFileNamesFromZip(fileBlob) {
  const zipReader = new ZipReader(new BlobReader(fileBlob));
  const entries = await zipReader.getEntries();
  return entries.map((entry) => entry.filename);
}

- Nick Silvestri

Answer 3

要在客户端执行此操作，您需要使用文件API（有关示例，请参见此答案）读取文件，然后解释zip数据以提取文件名。有一些库可以帮助完成第二部分，例如jszip。

- T.J. Crowder

---

谢谢您的回答。不幸的是，我不熟悉JavaScript，您能否提供一个使用jszip库的示例，以便我可以直接在我的应用程序中使用它。 - ihssan

Answer 4

函数readFiles() { var files = document.getElementById('files').files[0];

    var reader = new FileReader()
    reader.readAsBinaryString(files)

    reader.onload = (e) => {
        var myZip = e.target.result            
        var unzipper = new JSUnzip(myZip);            
        var readEntries = unzipper.readEntries();
        var myFiles = unzipper.entries;

        for(var i = 0; i < myFiles.length; i++) {
            var name = myFiles[i].fileName;
            console.log('filename = ', name)                             
        }

    }
}

- Moiza Olimpio

---

这似乎是现有已接受答案的复制/粘贴，只是将console.log更改为将文件放入本地变量中的微不足道的更改。 - Ross