My samples is using 2 JavaScript libraries.
1) JSZip(http://stuk.github.io/jszip)
2) FileSaver.js(https://github.com/eligrey/FileSaver.js/).
These library can downloads some files from one path at once and save as one Zip file.
Simple samples is below:
<!DOCTYPE html>downloadandzip-mojo-dojo_0.zip
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js" charset="utf-8"></script>
<script src="FileSaver.min.js" charset="utf-8"></script>
</head>
<body>
<form name=f1 method=post>
<h2>Download＋Zip Simple sample</h2>
Please set urlList variable correct file path in startDL() before testing.
<br>
<input type="button" name="b1" value="Download" onclick=startDL()>
</form>
<script type='text/javascript'>
function startDL(){
// urlListにはダウンロード用ファイルを直接指定しています。
// 【注意】日本語を含むファイル名はダウンロードできません。
var urlList = ["./ImageTest/IMG_3587.JPG","./ImageTest/IMG_3598.JPG"]
console.log(urlList);
zip = new JSZip();
deferreds = $.Deferred();
var promise = deferreds;
$.map(urlList,function(value,index) {
console.log('urlList:index='+index+' = '+value);
console.log('match() : '+value.match(".+/(.+?)([\?#;].*)?$")[1]);
promise = promise.then( function() {
var newPromise = new $.Deferred();
var xhr= new XMLHttpRequest();
xhr.open('GET',value,true);
xhr.responseType='arraybuffer';
xhr.addEventListener('load', function() {
// zipにレスポンスデータ追加
zip.file(value.match(".+/(.+?)([\?#;].*)?$")[1],xhr.response);
newPromise.resolve();
});
xhr.send();
return newPromise;
});
});
promise.then( function() {
zip.generateAsync({type:"blob"}).then( function(content){
saveAs(content,'test.zip');
});
});
deferreds.resolve();
}
</script>
</body>
</html>
I attached sample for mojo+dojo.
- Log in to post comments
.png)
.png)
.png)
.png)