在javascript中获取zip文件的文件名

Question

在我的应用程序中，我有一个包含一些字段和一个input file 字段的表单，一旦用户上传了zip file，我想获取包含在这个zip file 中的文件的名称。

这是表格：

<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 做到这一点？

Answer 1

我找到了一种使用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.
            }
        }   

Answer 2

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

Answer 3

函数 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)                             
        }

    }
}