javascript - How to add multiple files to a zip with zip.js? -
i using javascript zip.js library. i've seach around cannot find example more 1 file added zip.
here code, generates "corrupted" zip.
var len = results.rows.length, i; var k=1; zip.createwriter(new zip.blobwriter(), function(writer) { (i = 0; < len; i++){ // image url sqlite request url = results.rows.item(i).url; var img = new image(); img.onload = function() { var = document.createelement('a'); a.href = this.src; var filename= a.pathname.split('/').pop(); // filename.php timest = new date().gettime(); // use textreader read string add writer.add(timest+".jpg", new zip.data64urireader(getbase64image(img)), function() { // onsuccess callback k++; if(k==len){ settimeout(function(){ writer.close(function(blob) { // blob contains zip file blob object $('#test').attr("href", window.url.createobjecturl(blob)); $('#test').attr("download", "woeii.zip"); }); },1000); } }, function(currentindex, totalindex) { // onprogress callback }); }; img.src = url; } }); any idea make work? :)
if looking example of code handles multiple files, see here. can view source code.
this key source of demo (modified slightly):
var obj = this; var model = (function() { var zipfileentry, zipwriter, writer, creationmethod, url = obj.webkiturl || obj.mozurl || obj.url; return { setcreationmethod : function(method) { creationmethod = method; }, addfiles : function addfiles(files, oninit, onadd, onprogress, onend) { var addindex = 0; function nextfile() { var file = files[addindex]; onadd(file); // modified here use data64urireader instead of blobreader zipwriter.add(file.name, new zip.data64urireader(file.data), function() { addindex++; if (addindex < files.length) nextfile(); else onend(); }, onprogress); } function createzipwriter() { zip.createwriter(writer, function(writer) { zipwriter = writer; oninit(); nextfile(); }, onerror); } if (zipwriter) nextfile(); else if (creationmethod == "blob") { writer = new zip.blobwriter(); createzipwriter(); } else { createtempfile(function(fileentry) { zipfileentry = fileentry; writer = new zip.filewriter(zipfileentry); createzipwriter(); }); } }, getbloburl : function(callback) { zipwriter.close(function(blob) { var bloburl = creationmethod == "blob" ? url.createobjecturl(blob) : zipfileentry.tourl(); callback(bloburl); zipwriter = null; }); }, getblob : function(callback) { zipwriter.close(callback); } }; })(); usage: assumes <a id="downloadlink">download</a> element exists provide download once ready.
// prepare images var files = []; (i = 0; < len; i++) { // image url sqlite request var url = results.rows.item(i).url; (function(url){ var img = new image(); img.onload = function() { // add file array [{name, data}] var = document.createelement('a'); a.href = this.src; var filename= a.pathname.split('/').pop(); console.log("loaded file " + filename); files.push({name: filename, data: getbase64image(img) }); } img.src = url; })(url); } // wait image load var check = setinterval(function(){ if(files.length==images.length) { clearinterval(check); // set mode model.setcreationmethod("blob"); // add files zip model.addfiles(files, function() { // initialise method console.log("initialise"); }, function(file) { // onadd console.log("added file"); }, function(current, total) { // onprogress console.log("%s %s", current, total); }, function() { // onend // zip ready prepare download link // <a id="downloadlink" href="blob:url">download zip</a> model.getbloburl(function(url) { document.getelementbyid("downloadlink").href = url; document.getelementbyid("downloadlink").style.display = "block"; document.getelementbyid("downloadlink").download = "filename.zip"; }); }); } }, 500); you can use example source code add in progress indicators. hope helps, nice thing method zip model reusable if make it's own js file.
another thought: presume using getbase64image function from here, if , still experience corruption issues, perhaps try modifying return return dataurl; , comment out .replace(..., data64urireader may expect prefix.
Comments
Post a Comment