Tistory View

web/javascript

예제 Zip파일 풀기 : Javascript로 Zip파일 다루기

What should I do? 2020. 2. 22. 06:24
반응형

사용자가 파일을 선택하면 해당파일의 내용을 보여주고 각 항목을 클릭시 다운로드하는 예제를 만들어 보도록 하겠다.

이 곳에 사용되는 파일들은 다음에 파일을 다운 받으면 된다.

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

 

 

html코드

<html>
<head>
	<meta charset="UTF-8">
	
	<style>
	#zip_cotents {
		width: 100%;
		height: 400px;
		overflow: auto;
	}
	</style>
	
	<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/zip_common.js"></script>
	
	
	<script type="text/javascript">

	// global(window)영역에 zip-instance를 만들어 둔다.
	var zipInst = null;

	function myOnChangeFile(evt)
	{
		var file = document.getElementById("fileForUpload").files[0];
		
		if ( file )
		{
			var reader = new FileReader();
					
			reader.onload = function (evt) {
	    	
				// 파일내용을 읽으면 이 곳에 온다.
				// 파일내용은 evt.target.result에 있게 되고 이를 JSZip에 넘겨 구조를 파악하게 한다.
				JSZip.loadAsync( evt.target.result ).then(
		
					// Zip파일내용이 처리되면 화면에 그리는 코드가 수행될 것이다.
					function ( zip ) 
			  		{
			  			zipInst = zip;
			  			showfilelist( zipInst, 'zip_cotents' );
					}
				);
	    		}
	    		
			reader.onerror = function (evt) {
	     		alert( '파일을 못 열었어요?..');
			}
			
			reader.readAsArrayBuffer(file);
			
			
		}
		else {
			alert( '파일이 없는 걸로..');
		}
	}
		
	
	
	function showfilelist( zip, outId )
	{
	  	var text = '<table border="1">';
	  	
	  	text += '<tr>';
	  	text += '<td>relativePath<br/>name</td>';
	  	text += '<td>dir/file</td>';
	  	text += '</tr>';
  	
		// Zip파일내의 모든 파일을 순회한다.(압축을 푼것이 아니고 zip파일내의 파일목록)
		zip.forEach( 
			function (relativePath, entry )
			{																
					text += '<tr>';
					text += '<td>';
					
					// 사용자가 목록의 항목을 클릭할 경우 다운로드 받게 한다.
					text += '<a href="javascript:zip_download_content( zipInst, \'' + entry.name + '\', \'' + entry.name + '\' )">';
					text += relativePath + '<br/>'+ entry.name;
					text += '</a></td>';
					text += '<td>' + ( entry.dir ? 'dir' : 'file' ) + '</td>';
					text += '</tr>';

			}
		);
		
		text += '</table>';
		
		document.getElementById( outId ).innerHTML = text;
	}

	function zip_list_images( zip, outId ) 
  	{
  		var outElm = document.getElementById( outId );
  		
  		outElm.innerHTML = ''; // clear
  		
  		
		zip.forEach( 
		
			function (relativePath, entry )
			{	
            	var ext;
				
				if( entry.name.length < 4 ) {
					return;
				}
				
				ext = entry.name.substr( entry.name.length - 4, 4 );
				if( entry.name.endsWith('.jpg') || entry.name.endsWith('.png') )
				{	
					
					var container = document.createElement('div');
					
					var img = document.createElement('img');
				
					container.appendChild( img );
					outElm.appendChild( container );
					
					zip.file( entry.name ).async("base64").then(
						function ( base64Text )
						{
							img.setAttribute( 'src', 'data:image/jpeg;base64, ' + base64Text );
						}
					);
				}
			}
		);
	}


	</script>
	
</head>
<body>
	<div>
		Zip파일 선택 : <input id="fileForUpload" type="file" name="zipfilename" onchange="myOnChangeFile(event)" />
	</div>

	<!-- zip 파일의 내용을 보여주는 부분 -->
	<div id="zip_cotents"></div>
</body>
</html>

파일을 선택하면 myOnCangedFile함수가 호출하도록 되어었다.

 

 

zip_common.js 파일의 내용은 이 때까지 만들어둔 zip관련 함수를 묶어놓은 파일이다.

// 로드된 zip instance에서 entryName에 해당하는 파일을 filename으로 다운로드하는 함수
function zip_download_content( zip, entryName, filename )
{
	zip.file( entryName ).async("base64").then(
		function ( base64Text )
		{
			//window.location="data:application/octa-stream;base64, " + base64Text;
			//window.location="data:image/jpeg;base64, " + base64Text;
			
			var element = document.createElement('a');
	            element.setAttribute('href', 'data:application/octa-stream;base64,' + base64Text );
	            element.setAttribute('download', filename );
	            element.style.display = 'none';
	            document.body.appendChild(element);
	            element.click();
	            document.body.removeChild(element);
					
		}
	);
}

 

 

 

실행예제

아래의 파일선택을 눌러 파일을 선택하세요.

Zip파일 선택 :
 

Zip파일내의 jpeg파일을 화면에 그리기
Zip파일 선택 :
 

반응형
저작자표시 비영리 변경금지

'web > javascript' 카테고리의 다른 글

Javascript 변수내용(String, base64, blob, data url) 다운로드  (0) 2020.02.23
예제 Zip파일 만들기: Javascript로 Zip파일 다루기  (2) 2020.02.23
파일 압축하기 : Javascript로 Zip파일 다루기  (0) 2020.02.19
간단한 웹서버 돌리기 : 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