Tistory View

web/javascript

예제 Zip파일 만들기: Javascript로 Zip파일 다루기

What should I do? 2020. 2. 23. 06:07
반응형

압축하기예제소스.zip
0.03MB

압축을 하는 코드는 다음과 같다.

전체 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 more
«   2024/04   »
일 월 화 수 목 금 토
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