如何在javascript上解压缩文件

看看zip.js文档和演示页面。还要注意使用JavaScript文件系统API来读/写文件和创建临时文件。

如果zip文件包含多个条目，您可以读取zip文件条目，并显示一个链接表来下载每个单独的文件，如上面的演示所示。

如果你查看演示页面的源代码，你会看到以下代码（从Github的zip.js演示页面粘贴的代码）（我添加了注释来解释）：

function(obj) {
//Request fileSystemObject from JavaScript library for native support
var requestFileSystem = obj.webkitRequestFileSystem || obj.mozRequestFileSystem || obj.requestFileSystem;
function onerror(message) {
    alert(message);
}
//Create a data model to handle unzipping and downloading
var model = (function() {
    var URL = obj.webkitURL || obj.mozURL || obj.URL;
    return {
        getEntries : function(file, onend) {
            zip.createReader(new zip.BlobReader(file), function(zipReader) {
                zipReader.getEntries(onend);
            }, onerror);
        },
        getEntryFile : function(entry, creationMethod, onend, onprogress) {
            var writer, zipFileEntry;
            function getData() {
                entry.getData(writer, function(blob) {
                    var blobURL = creationMethod == "Blob" ? URL.createObjectURL(blob) : zipFileEntry.toURL();
                    onend(blobURL);
                }, onprogress);
            }
            //Write the entire file as a blob
            if (creationMethod == "Blob") {
                writer = new zip.BlobWriter();
                getData();
            } else {
                //Use the file writer to write the file clicked by user.
                createTempFile(function(fileEntry) {
                    zipFileEntry = fileEntry;
                    writer = new zip.FileWriter(zipFileEntry);
                    getData();
                });
            }
        }
    };
})();
(function() {
    var fileInput = document.getElementById("file-input");
    var unzipProgress = document.createElement("progress");
    var fileList = document.getElementById("file-list");
    var creationMethodInput = document.getElementById("creation-method-input");
    //The download function here gets called when the user clicks on the download link for each file.
    function download(entry, li, a) {
        model.getEntryFile(entry, creationMethodInput.value, function(blobURL) {
            var clickEvent = document.createEvent("MouseEvent");
            if (unzipProgress.parentNode)
                unzipProgress.parentNode.removeChild(unzipProgress);
            unzipProgress.value = 0;
            unzipProgress.max = 0;
            clickEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
            a.href = blobURL;
            a.download = entry.filename;
            a.dispatchEvent(clickEvent);
        }, function(current, total) {
            unzipProgress.value = current;
            unzipProgress.max = total;
            li.appendChild(unzipProgress);
        });
    }
    if (typeof requestFileSystem == "undefined")
        creationMethodInput.options.length = 1;
    fileInput.addEventListener('change', function() {
        fileInput.disabled = true;
      //Create a list of anchor links to display to download files on the web page
        model.getEntries(fileInput.files[0], function(entries) {
            fileList.innerHTML = "";
            entries.forEach(function(entry) {
                var li = document.createElement("li");
                var a = document.createElement("a");
                a.textContent = entry.filename;
                a.href = "#";
         //Click event handler
                a.addEventListener("click", function(event) {
                    if (!a.download) {
                        download(entry, li, a);
                        event.preventDefault();
                        return false;
                    }
                }, false);
                li.appendChild(a);
                fileList.appendChild(li);
            });
        });
    }, false);
})();
})(this);