[英]How to unzip file on javascript
I'm working on hybrid mobile app using html5/js. 我正在使用html5 / js开发混合移动应用程序。 It has a function download zip file then unzip them.
它具有下载zip文件然后将其解压缩的功能。 The download function is not problem but I don't know how to unzip file (using javascript).
下载功能不是问题,但我不知道如何解压缩文件(使用javascript)。 Many people refer to zip.js but it seems only reading zip file (not unzip/extract to new folder)
许多人都引用zip.js,但似乎只读取zip文件(而不是解压缩/提取到新文件夹)
Very appreciate if someone could help me !!! 非常感谢有人可以帮助我!
Have a look at zip.js documentation and demo page . 看看zip.js文档和演示页面 。 Also notice the use of JavaScript filesystem API to read/write files and create temporary files.
还要注意使用JavaScript 文件系统API来读取/写入文件并创建临时文件。
If the zip file contains multiple entries, you could read the zip file entries and display a table of links to download each individual file as in the demo above. 如果zip文件包含多个条目,则可以阅读zip文件条目并显示链接表,以下载每个单独的文件,如上面的演示中所示。
If you look the source of the demo page, you see the following code (code pasted from Github demo page for zip.js) (I've added comments to explain): 如果您查看演示页面的源代码,则会看到以下代码(从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);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.