Tistory View
반응형
압축을 하는 코드는 다음과 같다.
전체 HTML코드를 올려 놓았다.
주석을 참고하면서 보면 그리 어렵지 않을 것이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="/jszip/jszip.min.js"></script>
<script type="text/javascript" src="/jszip/jszip-utils.min.js"></script>
<!--[if IE]
<script type="text/javascript" src="/jszip/jszip-utils.ie.min.js"></script>
<![endif]-->
<!-- 다운로드처리용 -->
<script type="text/javascript" src="/jszip/download.js"></script>
<script type="text/javascript">
var zip = new JSZip();
// 사용자가 파일을 선택하면 어떤 파일들인지 보여준다.
function update_zip_list() {
var html = '<table border="1">';
zip.forEach(
function( relativePath, entry )
{
//html += relativePath;
html += '<tr>';
html += '<td>' + entry.name + '</td>';
html += '<td>' + ( entry.dir ? 'dir' : 'file' ) + '</td>';
html += '</tr>';
}
);
html += '</table>';
zip_list.innerHTML = html;
}
// 사용자가 파일(들)을 선택하면 압축대상으로 넣고, 파일목록을 보여주는 코드를 수행한다.
function myOnFileChanged( evt ) {
var files = document.getElementById('file4upload').files;
for( var i = 0 ; i < files.length ; i++ ) {
var file = files[i];
zip.file( file.name, file );
}
// 파일목록을 업데이트
update_zip_list();
}
// 압축이 진행되는 과정에 보여줄 메세지
function showMessage( msg ) {
document.getElementById( 'msg_output' ).innerText = msg;
}
// 압축이 진행되는 과정에 보여줄 메세지(%를 출력한다.)
function updatePercent( percent ) {
document.getElementById( 'progress' ).innerText = '' + percent + '%';
}
// 다운로드를 누르면, 실제 압축이 시작된다.
function myOnDownload( evt ) {
zip.generateAsync({
type: "blob",// "blob" or "base64" or so on.
// compression : 기본값은 "STORE"로 되어있어 압축을 하지 않는다.(zip파일에 파일들을 그냥 묶어버리기만 한다.)
// 강제로 이 코드를 넣어줘야 압축을 한다.
compression: "DEFLATE"
},
// 압축의 진행상황을 사용자에게 보여주기 위한 콜백함수
function updateCallback( metadata ) {
var msg = "progression : " + metadata.percent.toFixed(2) + " %";
if(metadata.currentFile) {
msg += ", current file = " + metadata.currentFile;
}
showMessage(msg);
updatePercent(metadata.percent|0);
}
).then(
function( zipContents )
{
// 압축이 다되면 다운로드를 한다.
var filename = 'filename.zip';
// type에 'base64'로 한경우
//download("data:application/octet-stream;base64," + zipContents, filename, "application/octet-stream");
// type에 'blob'로 한경우
download( zipContents, filename, "application/octet-stream");
}
);
}
</script>
</head>
</body>
압축할 파일 선택후 [download]버튼을 누르세요..<br />
[download]버튼을 누른 후 한참 걸릴 수도 있습니다..<br />
<form>
<input id="file4upload" type="file" name="name" multiple />
<input id="downloadbtn" type="button" value="download" />
</form>
<div id="msg_output"></div>
<div id="progress"></div>
<div id="zip_list"></div>
<script type="text/javascript">
document.getElementById('file4upload').addEventListener('change', myOnFileChanged );
document.getElementById('downloadbtn').addEventListener('click', myOnDownload );
</script>
</body>
</html>
압축할 파일 선택후 [download]버튼을 누르세요. 파일선택 창에서 여러개를 선택할 수 있습니다.
[download]버튼을 누른 후 한참 걸릴 수도 있습니다..
반응형
'web > javascript' 카테고리의 다른 글
HTML Image lazy loading[느린 로딩] #1 (0) | 2020.12.12 |
---|---|
Javascript 변수내용(String, base64, blob, data url) 다운로드 (0) | 2020.02.23 |
예제 Zip파일 풀기 : Javascript로 Zip파일 다루기 (2) | 2020.02.22 |
파일 압축하기 : Javascript로 Zip파일 다루기 (0) | 2020.02.19 |
간단한 웹서버 돌리기 : Javascript로 zip파일 다루기 (0) | 2020.02.19 |
Replies
NOTICE
RECENT ARTICLES
RECENT REPLIES
- Total
- Today
- Yesterday
LINK
TAG
- 컴퓨트셰이더
- 에어콘
- 공유 컨텍스트
- choreographer
- 에어컨
- 적금
- 사용료
- TTS
- 경제보복
- 전기료
- 전기세
- OpenGLes
- 컴퓨트쉐이더
- 아끼는 법
- 애드핏
- 안드로이드
- Android
- texture
- 재테크
- 재태크
- 블로그
- 티스토리
- 전기요금
- ComputeShader
- 예금
- gpgpu
- 애드센스
- 텍스처
- 금리
- OpenGL ES
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Article Box