Tistory View
반응형
사용자가 파일을 선택하면 해당파일의 내용을 보여주고 각 항목을 클릭시 다운로드하는 예제를 만들어 보도록 하겠다.
이 곳에 사용되는 파일들은 다음에 파일을 다운 받으면 된다.
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
- OpenGLes
- choreographer
- 재테크
- 재태크
- gpgpu
- OpenGL ES
- texture
- 애드핏
- 컴퓨트쉐이더
- 에어콘
- 전기세
- 아끼는 법
- 공유 컨텍스트
- TTS
- 텍스처
- 적금
- 예금
- ComputeShader
- 전기료
- Android
- 티스토리
- 블로그
- 안드로이드
- 컴퓨트셰이더
- 전기요금
- 금리
- 경제보복
- 사용료
- 에어컨
- 애드센스
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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