Javascript JSZip读取Zip文件并从现有Zip文件执行
我一直在用Javascript读写zip文件 我试图做的是从Javascript JSZip读取Zip文件并从现有Zip文件执行,javascript,jquery,arrays,jszip,Javascript,Jquery,Arrays,Jszip,我一直在用Javascript读写zip文件 我试图做的是从input[type=file]元素（我使用FileReader读取zip文件的内容并在页面上显示文件/文件夹）加载压缩在zip文件中的web应用程序（index.html、style.css、图像文件以及用户对其web应用程序的任何其他要求） 我的问题是将它们的源代码与新的zip文件合并，同时仍然可以使用将文件添加到zip文件中 我知道，但还没能让它满足我的需要 我可以使用zip.file（名称，代码）将文件添加到加载的zip文件中，
input[type=file]zip.file（名称，代码）使用zip.file（名称，代码）input[type=file]$(document).ready(function() {
// Detect if users browser can load and download files in Javascript
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Detect if users browser can download files in Javascript
} else {
alert("The File APIs are not fully supported in this browser.");
}
// Show error if zip is corrupted
if (!window.FileReader || !window.ArrayBuffer) {
$(".error_block").removeClass("hide");
return;
}
// Show contents
var $result = $(".result");
$("#file").on("change", function(evt) {
// remove content
$result.html("");
// be sure to show the results
$(".result_block").removeClass("hide");
// see http://www.html5rocks.com/en/tutorials/file/dndfiles/
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
var $title = $("<h4>", {
text : theFile.name
});
$result.append($title);
var $fileContent = $("<ul>");
try {
var dateBefore = new Date();
// read the content of the file with JSZip
var zip = new JSZip(e.target.result);
var dateAfter = new Date();
$title.append($("<span>", {
text:" (parsed in " + (dateAfter - dateBefore) + "ms)"
}));
$(".check").removeClass("hide");
// that, or a good ol' for(var entryName in zip.files)
$.each(zip.files, function (index, zipEntry) {
$fileContent.append($("<li>", {
text : zipEntry.name
}));
// the content is here : zipEntry.asText()
});
// end of the magic !
} catch(e) {
$fileContent = $("<div>", {
"class" : "alert alert-danger",
text : "Error reading " + theFile.name + " : " + e.message
});
}
$result.append($fileContent);
// Download as Linux App
$(".export-as-lin-app").on("click", function() {
JSZipUtils.getBinaryContent("YourLinApp.zip", function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
// Your Web App
zip.file("source.c", "/*\n Save this file as main.c and compile it using this command\n (those are backticks, not single quotes):\n gcc -Wall -g -o main main.c `pkg-config --cflags --libs gtk+-2.0 webkit-1.0` -export-dynamic\n \n Then execute it using:\n ./main\n \n If you can't compile chances are you don't have gcc installed.\n Install gcc/c with the following terminal command. (This command is for Debian based Linux distros)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc\n \n WebKit requires libraries to successfully aquire, configure, and compile. You can get libraries by issuing the following command in your terminal:\n sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n \n Ubuntu Webkit information - https://help.ubuntu.com/community/WebKit\n sudo apt-get install libwebkitgtk-dev python-webkit-dev python-webkit\n \n Required dependencies for this build: (If you installed all the above this is not needed)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev libwebkitgtk-dev\n*/\n\n#include <limits.h>\n#include <gtk/gtk.h>\n#include <webkit/webkit.h>\n\nstatic GtkWidget* window;\nstatic WebKitWebView* web_view;\n\nstatic void destroy_cb (GtkWidget* widget, gpointer data) {\n gtk_main_quit();\n}\n\nstatic GtkWidget* create_browser() {\n GtkWidget* scrolled_window = gtk_scrolled_window_new (NULL, NULL);\n gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);\n\n web_view = WEBKIT_WEB_VIEW (webkit_web_view_new ());\n gtk_container_add (GTK_CONTAINER (scrolled_window), GTK_WIDGET (web_view));\n\n return scrolled_window;\n}\n\nint main (int argc, char* argv[]) {\n gtk_init (&argc, &argv);\n\n GtkWidget* vbox = gtk_vbox_new (FALSE, 0);\n gtk_box_pack_start (GTK_BOX (vbox), create_browser(), TRUE, TRUE, 0);\n\n GtkWidget* window = gtk_window_new (GTK_WINDOW_TOPLEVEL);\n gtk_window_set_default_size (GTK_WINDOW (window), 800, 560);\n gtk_widget_set_name (window, \"" + $('.projectname').val() + "\");\n /* gtk_window_set_icon_from_file(window, \"app/logo.png\", NULL); */\n g_signal_connect (G_OBJECT (window), \"destroy\", G_CALLBACK (destroy_cb), NULL);\n gtk_container_add (GTK_CONTAINER (window), vbox);\n \n char uri[PATH_MAX];\n char cwd[PATH_MAX];\n\n getcwd(cwd, sizeof(cwd));\n\n if (argc > 1)\n snprintf(uri, sizeof(uri), \"%s\", argv[1]);\n else\n snprintf(uri, sizeof(uri), \"file://%s/" + $('.projectname').val() + "/app/index.html\", cwd);\n \n webkit_web_view_open (web_view, uri);\n\n gtk_widget_grab_focus (GTK_WIDGET (web_view));\n gtk_widget_show_all (window);\n gtk_main ();\n\n return 0;\n}\n");
zip.file("README", "This application for Linux relies on the following dependencies...\n sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n\nIf kodeWeave was at all helpful for you. Would you consider donating to the project?\nhttps://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BSYGA2RB5ZJCC\n\n");
var content = zip.generate({type:"blob"});
saveAs(content, "lin-export.zip");
return false;
});
});
}
})(f);
// read the file !
// readAsArrayBuffer and readAsBinaryString both produce valid content for JSZip.
reader.readAsArrayBuffer(f);
$(".check").removeClass("hide").addClass("hide");
// reader.readAsBinaryString(f);
}
});
return false;
});
$（文档）.ready（函数（）{
//检测用户浏览器是否可以加载和下载Javascript格式的文件
if（window.File&&window.FileReader&&window.FileList&&window.Blob）{
//检测浏览器用户是否可以下载Javascript格式的文件
}否则{
警报（“此浏览器不完全支持文件API”）；
}
//如果zip已损坏，则显示错误
如果（！window.FileReader | |！window.ArrayBuffer）{
$（“.error_block”）.removeClass（“隐藏”）；
返回；
}
//显示内容
变量$result=$（“.result”）；
$（“#文件”）。关于（“更改”，函数（evt）{
//删除内容
$result.html（“”）；
//一定要显示结果
$（“.result_block”）.removeClass（“隐藏”）；
//看http://www.html5rocks.com/en/tutorials/file/dndfiles/
var files=evt.target.files；
for（var i=0，f；f=files[i]；i++）{
var reader=new FileReader（）；
//闭包以捕获文件信息。
reader.onload=（函数（文件）{
返回函数（e）{
变量$title=$（“”{
text:theFile.name
});
$result.append（$title）；
var$fileContent=$（“”）；
试一试{
var dateBefore=新日期（）；
//使用JSZip读取文件的内容
var zip=newjszip（e.target.result）；
var dateAfter=新日期（）；
$title.append（$（“”）{
文本：“（在“+（dateAfter-dateBefore）+”ms中解析）
}));
$（“.check”）.removeClass（“隐藏”）；
//或者是一个很好的ol（zip.files中的var entryName）
$.each（zip.files，函数（index，zipEntry）{
$fileContent.append（$（“- ”）{
文本：zipEntry.name
}));
//内容如下：zipEntry.asText（）
});
//魔术结束了！
}捕获（e）{
$fileContent=$（“”{
“类”：“警告危险”，
文本：“读取“+theFile.name+”：“+e.message时出错”
});
}
$result.append（$fileContent）；
//作为Linux应用程序下载
$（“.export as lin app”）。打开（“单击”，函数（）{
JSZipUtils.getBinaryContent（“YourLinApp.zip”），函数（err，data）{
如果（错误）{
抛出错误；//或句柄错误
}
var zip=新的JSZip（数据）；
//你的Web应用程序
zip.file（“source.c”，“/*\n将此文件另存为main.c，并使用此命令\n编译它（这些是反勾号，不是单引号）：\n gcc-Wall-g-o main.c`pkg config--cflags--libs gtk+-2.0 webkit-1.0`-export dynamic\n\n然后使用以下命令执行它：\n./main\n\n如果无法编译，则可能没有安装gcc。\n使用以下终端命令安装gcc/c。（此命令适用于基于Debian的Linux发行版）\n sudo apt get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc\n\n WebKit需要库才能成功获取、配置和编译。您可以通过在终端中发出以下命令来获取库：\n sudo apt get install subversion gtk doc tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libgail-dev libgail-dev\n\n Ubuntu Webkit信息-https://help.ubuntu.com/community/WebKit\n sudo apt get install libwebkittk dev python webkit dev python webkit\n\n t的必需依赖项他的构建：（如果您安装了以上所有内容，则不需要）\n sudo apt get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc subversion gtk tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu dev libxslt dev libsoup2.4-dev libsqlite3 dev gperf bison flex libjpeg62 dev libpng12 dev libxt dev autotools dev libgstreamer-plugins-base0.10-dev libgail dev libgail-webkitgtk dev\n*/\n\n#include\n#include\n#include\n\n静态GtkWidget*窗口；\n静态WebKitWebView*web\u视图；\n\n静态无效销毁\u cb（GtkWidget*小部件，gpointer数据）{\n gtk\u主退出（）\n}\n\n\n\n静态GtkWidget*创建\u浏览器（）{\n GtkWidget*滚动的\u窗口=gtk滚动的新窗口（空，空）\n gtk\u滚动的策略窗口集（GTK_滚动_窗口（滚动_窗口）、GTK_策略_自动、GTK_策略_自动）；\n\n web_视图=WEBKIT_web_视图（WEBKIT_web_视图新（））；\n GTK_容器添加（GTK_容器（滚动_窗口）、GTK_小部件（web_视图））；\n\n\n返回滚动_窗口；\n}\n\n\n\n\n主（int argc、char*argv[]）{GTK_初始化（&argv）；\n\n GtkWidget*vbox=gtk\u vbox\u new（FALSE，0）；\n gtk\u box\u pack\u start（gtk\u box（vbox），create\u browser（），TRUE，TRUE，0）；\n\n GtkWidget*window=gtk\u window\u new（gtk\u window\u顶层）；\n gtk\u window\u设置默认大小（gtk\u window（window），800，560）；\n gtk\u小部件\u设置名称（window），“+”（$”.projectname）；\n
// Download as Linux App
$(".export-as-lin-app").on("click", function() {
JSZipUtils.getBinaryContent("YourLinApp.zip", function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
// Your Web App
zip.file("source.c", "/*\n Save this file as main.c and compile it using this command\n (those are backticks, not single quotes):\n gcc -Wall -g -o main main.c `pkg-config --cflags --libs gtk+-2.0 webkit-1.0` -export-dynamic\n \n Then execute it using:\n ./main\n \n If you can't compile chances are you don't have gcc installed.\n Install gcc/c with the following terminal command. (This command is for Debian based Linux distros)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc\n \n WebKit requires libraries to successfully aquire, configure, and compile. You can get libraries by issuing the following command in your terminal:\n sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n \n Ubuntu Webkit information - https://help.ubuntu.com/community/WebKit\n sudo apt-get install libwebkitgtk-dev python-webkit-dev python-webkit\n \n Required dependencies for this build: (If you installed all the above this is not needed)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev libwebkitgtk-dev\n*/\n\n#include <limits.h>\n#include <gtk/gtk.h>\n#include <webkit/webkit.h>\n\nstatic GtkWidget* window;\nstatic WebKitWebView* web_view;\n\nstatic void destroy_cb (GtkWidget* widget, gpointer data) {\n gtk_main_quit();\n}\n\nstatic GtkWidget* create_browser() {\n GtkWidget* scrolled_window = gtk_scrolled_window_new (NULL, NULL);\n gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);\n\n web_view = WEBKIT_WEB_VIEW (webkit_web_view_new ());\n gtk_container_add (GTK_CONTAINER (scrolled_window), GTK_WIDGET (web_view));\n\n return scrolled_window;\n}\n\nint main (int argc, char* argv[]) {\n gtk_init (&argc, &argv);\n\n GtkWidget* vbox = gtk_vbox_new (FALSE, 0);\n gtk_box_pack_start (GTK_BOX (vbox), create_browser(), TRUE, TRUE, 0);\n\n GtkWidget* window = gtk_window_new (GTK_WINDOW_TOPLEVEL);\n gtk_window_set_default_size (GTK_WINDOW (window), 800, 560);\n gtk_widget_set_name (window, \"" + $('.projectname').val() + "\");\n /* gtk_window_set_icon_from_file(window, \"app/logo.png\", NULL); */\n g_signal_connect (G_OBJECT (window), \"destroy\", G_CALLBACK (destroy_cb), NULL);\n gtk_container_add (GTK_CONTAINER (window), vbox);\n \n char uri[PATH_MAX];\n char cwd[PATH_MAX];\n\n getcwd(cwd, sizeof(cwd));\n\n if (argc > 1)\n snprintf(uri, sizeof(uri), \"%s\", argv[1]);\n else\n snprintf(uri, sizeof(uri), \"file://%s/" + $('.projectname').val() + "/app/index.html\", cwd);\n \n webkit_web_view_open (web_view, uri);\n\n gtk_widget_grab_focus (GTK_WIDGET (web_view));\n gtk_widget_show_all (window);\n gtk_main ();\n\n return 0;\n}\n");
zip.file("README", "This application for Linux relies on the following dependencies...\n sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n\nIf kodeWeave was at all helpful for you. Would you consider donating to the project?\nhttps://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BSYGA2RB5ZJCC\n\n");
var content = zip.generate({type:"blob"});
saveAs(content, "lin-export.zip");
return false;
});
});
$(document).ready(function() {
// Detect if users browser can load and download files in Javascript
if (window.File && window.FileReader && window.FileList && window.Blob) {
// Detect if users browser can download files in Javascript
} else {
alert("The File APIs are not fully supported in this browser.");
}
// Show error if zip is corrupted
if (!window.FileReader || !window.ArrayBuffer) {
$(".error_block").removeClass("hide");
return;
}
// Show contents
var $result = $(".result");
$("#file").on("change", function(evt) {
// remove content
$result.html("");
// be sure to show the results
$(".result_block").removeClass("hide");
// see http://www.html5rocks.com/en/tutorials/file/dndfiles/
var files = evt.target.files;
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
var $title = $("<h4>", {
text : theFile.name
});
$result.append($title);
var $fileContent = $("<ul>");
try {
var dateBefore = new Date();
// read the content of the file with JSZip
var zip = new JSZip(e.target.result);
var dateAfter = new Date();
$title.append($("<span>", {
text:" (parsed in " + (dateAfter - dateBefore) + "ms)"
}));
$(".check").removeClass("hide");
// that, or a good ol' for(var entryName in zip.files)
$.each(zip.files, function (index, zipEntry) {
$fileContent.append($("<li>", {
text : zipEntry.name
}));
// the content is here : zipEntry.asText()
});
// end of the magic !
} catch(e) {
$fileContent = $("<div>", {
"class" : "alert alert-danger",
text : "Error reading " + theFile.name + " : " + e.message
});
}
$result.append($fileContent);
// Download as Linux App
$(".export-as-lin-app").on("click", function() {
JSZipUtils.getBinaryContent("YourLinApp.zip", function(err, data) {
if(err) {
throw err; // or handle err
}
var zip = new JSZip(data);
// Your Web App
zip.file("source.c", "/*\n Save this file as main.c and compile it using this command\n (those are backticks, not single quotes):\n gcc -Wall -g -o main main.c `pkg-config --cflags --libs gtk+-2.0 webkit-1.0` -export-dynamic\n \n Then execute it using:\n ./main\n \n If you can't compile chances are you don't have gcc installed.\n Install gcc/c with the following terminal command. (This command is for Debian based Linux distros)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc\n \n WebKit requires libraries to successfully aquire, configure, and compile. You can get libraries by issuing the following command in your terminal:\n sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n \n Ubuntu Webkit information - https://help.ubuntu.com/community/WebKit\n sudo apt-get install libwebkitgtk-dev python-webkit-dev python-webkit\n \n Required dependencies for this build: (If you installed all the above this is not needed)\n sudo apt-get install libgtk2.0-dev libgtk2.0-doc libglib2.0-doc subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev libwebkitgtk-dev\n*/\n\n#include <limits.h>\n#include <gtk/gtk.h>\n#include <webkit/webkit.h>\n\nstatic GtkWidget* window;\nstatic WebKitWebView* web_view;\n\nstatic void destroy_cb (GtkWidget* widget, gpointer data) {\n gtk_main_quit();\n}\n\nstatic GtkWidget* create_browser() {\n GtkWidget* scrolled_window = gtk_scrolled_window_new (NULL, NULL);\n gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window), GTK_POLICY_AUTOMATIC, GTK_POLICY_AUTOMATIC);\n\n web_view = WEBKIT_WEB_VIEW (webkit_web_view_new ());\n gtk_container_add (GTK_CONTAINER (scrolled_window), GTK_WIDGET (web_view));\n\n return scrolled_window;\n}\n\nint main (int argc, char* argv[]) {\n gtk_init (&argc, &argv);\n\n GtkWidget* vbox = gtk_vbox_new (FALSE, 0);\n gtk_box_pack_start (GTK_BOX (vbox), create_browser(), TRUE, TRUE, 0);\n\n GtkWidget* window = gtk_window_new (GTK_WINDOW_TOPLEVEL);\n gtk_window_set_default_size (GTK_WINDOW (window), 800, 560);\n gtk_widget_set_name (window, \"" + $('.projectname').val() + "\");\n /* gtk_window_set_icon_from_file(window, \"app/logo.png\", NULL); */\n g_signal_connect (G_OBJECT (window), \"destroy\", G_CALLBACK (destroy_cb), NULL);\n gtk_container_add (GTK_CONTAINER (window), vbox);\n \n char uri[PATH_MAX];\n char cwd[PATH_MAX];\n\n getcwd(cwd, sizeof(cwd));\n\n if (argc > 1)\n snprintf(uri, sizeof(uri), \"%s\", argv[1]);\n else\n snprintf(uri, sizeof(uri), \"file://%s/" + $('.projectname').val() + "/app/index.html\", cwd);\n \n webkit_web_view_open (web_view, uri);\n\n gtk_widget_grab_focus (GTK_WIDGET (web_view));\n gtk_widget_show_all (window);\n gtk_main ();\n\n return 0;\n}\n");
zip.file("README", "This application for Linux relies on the following dependencies...\n sudo apt-get install subversion gtk-doc-tools autoconf automake libtool libgtk2.0-dev libpango1.0-dev libicu-dev libxslt-dev libsoup2.4-dev libsqlite3-dev gperf bison flex libjpeg62-dev libpng12-dev libxt-dev autotools-dev libgstreamer-plugins-base0.10-dev libenchant-dev libgail-dev\n\nIf kodeWeave was at all helpful for you. Would you consider donating to the project?\nhttps://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BSYGA2RB5ZJCC\n\n");
var content = zip.generate({type:"blob"});
saveAs(content, "lin-export.zip");
return false;
});
});
}
})(f);
// read the file !
// readAsArrayBuffer and readAsBinaryString both produce valid content for JSZip.
reader.readAsArrayBuffer(f);
$(".check").removeClass("hide").addClass("hide");
// reader.readAsBinaryString(f);
}
});
return false;
});
// read the content with a FileReader
var originalZipContent = e.target.result;
// ...
$(".export-as-lin-app").on("click", function() {
JSZipUtils.getBinaryContent("YourLinApp.zip", function(err, data) {
// merge two files
var zip = new JSZip();
zip.load(data);
zip.load(originalZipContent)
var content = zip.generate({type:"blob"});
saveAs(content, "lin-export.zip");
}
});