HTML5 File API 구현

웹 브라우저(Gecko, Webkit 등..)상에서 로컬 영역의 특정 파일을 접근, 조작할 수 있는 여러가지 방법을 제공합니다.

단 제공되는 File Interface는 로컬 보안 상 파일 탐색기 또는 Drag & Drop 방식을 이용해 사용자가 직접 선택한 File로 한정 시킵니다.

아래는 관련 소스를 모듈화 시킨 코드이며, 각 기능은 아래와 같습니다.

1. 생성자 함수:

File(form || undefined) 

form: 해당 File 컨트롤을 포함하는 부모 엘리먼트(보통 Form 엘리먼트가 해당됨)

2. 각 File 컨트롤의 onchange 이벤트 등록

.change(callback);

callback: onchange 이벤트 시 핸들러

3. 각 Drop Zone 엘리먼트의 dragenter 이벤트 등록

.dragenter(elems, callback)

elems: 엘리먼트 or 엘리먼트 배열

callback: ondragenter 이벤트 시 핸들러

4. 각 Drop Zone 엘리먼트의 dragleave 이벤트 등록

dragleave(elems, callback)

elems: 엘리먼트 or 엘리먼트 배열

callback: dragleave 이벤트 시 핸들러

5. 각 Drop Zone 엘리먼트의 dragover 이벤트 등록

dragover(elems, callback)

elems: 엘리먼트 or 엘리먼트 배열

callback: dragover 이벤트 시 핸들러

6. 각 Drop Zone 엘리먼트의 dragdrop 이벤트 등록

dragdrop(elems, callback)

elems: 엘리먼트 or 엘리먼트 배열

callback: dragover 이벤트 시 핸들러

7. progress 관련 이벤트 등록

progress(data, before, update, load, dataType)

data: file 객체

before: 읽어드린 file 객체의 onloadstart 이벤트 시 핸들러

update: 읽어드린 file 객체의 onprogress 이벤트 시 핸들러

load: 읽어드린 file 객체의 onload 이벤트 시 핸들러

dataType: file 객체의 저장 데이터 타입

8. file 객체 반복자

File.each(files, callback, type)

files:컨트롤을 통해 선택된 파일 리스트

callback: 각 컨트롤의 반복자 callback

type: 허용 file 타입

9. 파일 읽기

Fil.read(data, callback, dataType)

data: 읽어드릴 file 객체

callback: 읽어드린 file 객체의 onload 이벤트 시 핸들러

dataType: file 객체의 저장 데이터 타입

10. Blob 생성

File.readBlob(data, start, end, callback)

data: 읽어드릴 file 객체

start: 시작 바이트 배열 index

end: 마지막 바이트 배열 index

callback: 읽어드린 file 객체의 onload 이벤트 시 핸들러

- 관련된 자세한 소스는 아래 jsbin.com에 등록된 페이지를 살펴 보시기 바랍니다.

1. JSBin 소스 링크:

http://jsbin.com/urupic/2

2. 모듈 사용방법:

  window.onload = function (e) {
        //var target = document.getElementById('spin');
        //var spinner = new Spinner(opts).spin(target);

        var zone1 = document.getElementById('drop_zone1');
        var zone2 = document.getElementById('drop_zone2');
        var zone3 = document.getElementById('drop_zone3');

        var zones = [zone1];

        var progress = document.getElementById('progress_bar');
        var progress_percent = document.getElementById('progress_percent');

        File().change(function (e, files) {

            zone1.innerHTML = "Loading...";

            var that = this;
            var h = [];

            File.each(files, function (idx) {

                File.read(this, function (e, result) {

                    var html = '<li>';
                    html += '<div style="margin-top:20px;margin-left:10px;">';
                    html += '<img src="' + result + '" width="200" height="200" style="border:gray 2px solid" />';
                    html += '<div style="margin-top:10px"> name: ' + escape(this.name) + ' type: ' + this.type + ' size: ' + this.size + ', lastModifiedDate: ' + this.lastModifiedDate + ',' + this.lastModifiedDate.toLocaleDateString() + '</div>';
                    html += '<textarea style="margin-top:10px;width:600px;height:200px">' + result + '</textarea>';
                    html += '</div>';
                    html += '</li>';

                    h.push(html);

                    if (idx >= files.length - 1) document.getElementById('image_list').innerHTML += h.join('');

                }, 'dataUrl');

                /*
                File.readBlob(this, 0, this.size, function (e, result) {
                });
                */

                that.progress(this, function (e) {
                    progress_percent.style.width = '0%';
                    progress_percent.textContent = '0%';

                    progress.className = 'loading';
                },
			    function (e, loaded, total) {

			        var percent = Math.round((loaded / total) * 100);

			        if (percent < 100) {
			            progress_percent.style.width = percent + '%';
			            progress_percent.textContent = percent + '%';
			        }
			    },
			    function (e) {
			        progress_percent.style.width = '100%';
			        progress_percent.textContent = '100%';

			        if (idx >= files.length - 1) {
			            zone1.innerHTML = "Upload Complete";
			            window.setTimeout(function () { progress.className = ''; }, 2000);
			        }
			    });

            }, 'image');
        })
	    .dragenter(zones, function (e, zone) {
	        zone.style.backgroundColor = 'orange';
	        zone.style.color = 'black';
	    })
	    .dragover(zones, function (e, zone) {
	        zone.style.backgroundColor = 'orange';
	        zone.style.color = 'black';
	    })
	    .dragleave(zones, function (e, zone) {
	        zone.style.backgroundColor = 'white';
	        zone.style.color = '#BBB';
	    })
	    .dragdrop(zones, function (e, files, zone) {

	        zone.innerHTML = "Loading...";

	        var that = this;
	        var h = [];

	        File.each(files, function (idx) {

	            File.read(this, function (e, result) {

	                var html = '<li>';
	                html += '<div style="margin-top:20px;margin-left:10px;">';
	                html += '<img src="' + result + '" width="200" height="200" style="border:gray 2px solid" />';
	                html += '<div style="margin-top:10px"> name: ' + escape(this.name) + ' type: ' + this.type + ' size: ' + this.size + ', lastModifiedDate: ' + this.lastModifiedDate + ',' + this.lastModifiedDate.toLocaleDateString() + '</div>';
	                html += '<textarea style="margin-top:10px;width:600px;height:200px">' + result + '</textarea>';
	                html += '</div>';
	                html += '</li>';

	                h.push(html);

	                if (idx >= files.length - 1) document.getElementById('image_list').innerHTML += h.join('');

	            }, 'dataUrl');

	            /*
	            File.readBlob(this, 0, this.size, function (e, result) {
	            });
	            */

	            that.progress(this, function (e) {
	                progress_percent.style.width = '0%';
	                progress_percent.textContent = '0%';

	                progress.className = 'loading';
	            },
			    function (e, loaded, total) {

			        var percent = Math.round((loaded / total) * 100);

			        if (percent < 100) {
			            progress_percent.style.width = percent + '%';
			            progress_percent.textContent = percent + '%';
			        }
			    },
			    function (e, result) {
			        progress_percent.style.width = '100%';
			        progress_percent.textContent = '100%';

			        if (idx >= files.length - 1) {
			            zone.style.backgroundColor = 'white';
			            zone.style.color = '#BBB';
			            zone.innerHTML = "Upload Complete";

			            window.setTimeout(function () { progress.className = ''; }, 2000);
			        }
			    });

	        }, 'image');
	    });
    }


    function bind(elem, type, handler, capture) {

        type = typeof type === 'string' && type || '';
        handler = handler || function () { ; };

        if (elem.addEventListener) {
            elem.addEventListener(type, handler, capture);
        }
        else if (elem.attachEvent) {
            elem.attachEvent('on' + type, handler);
        }

        return elem;
    };

3. 실행화면 및 브라우저 지원 상황:

- 브라우저 지원 상황:

http://caniuse.com/#feat=fileapi

5. 참고 사이트:

[HTML5강좌] 20. File API:

http://sqler.pe.kr/OSS/bIISLec/402253

Html5rocks File API:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

W3c File API:

http://www.w3.org/TR/FileAPI/#dfn-Blob

HTML5 Full Screen API 간단 구현

웹 브라우저(Gecko, Webkit 등..)상에서 특정 엘리먼트 영역을 전체 화면(툴바 영역이 보이지 않는)으로 변경할 수 있는 FullScreen API가 있습니다.

API에 대한 설명은 그리 어렵지 않아 따로 설명 드리지 않도록 하겠습니다.

아래는 관련 소스를 모듈화 시킨 코드 입니다.

1. JSBin 소스 링크:

http://jsbin.com/ayicib/3

2.모듈 사용방법:

window.onload = function () {

        var contextStart = document.getElementById('specialstuffStart');

        var btnStart = document.getElementById('fsbuttonStart');
        var btnEnd = document.getElementById('fsbuttonEnd');

        bind(btnStart, 'click', function () {
            FullScreen.on(contextStart, function (e) {
                btnStart.style.display = 'none';
                btnEnd.style.display = 'block';
            }, function (e) {
                btnStart.style.display = 'block';
                btnEnd.style.display = 'none';
            });
        }, false);

        bind(document, 'keyup', function (e) {
            // space key
            if (e.keyCode === 32) FullScreen.off();
        }, false);
    }

    function bind(elem, type, handler, capture) {
        type = typeof type === 'string' ? type : '';
        handler = typeof handler === 'function' ? handler : function () { ; };
        capture = capture || false;

        if (elem.addEventListener) {
            elem.addEventListener(type, handler, capture);
        }
        else if (elem.attachEvent) {
            elem.attachEvent('on' + type, handler);
        }

        return this;
    }

FullScreen.on(contextStart, function (e) {
                btnStart.style.display = 'none';
                btnEnd.style.display = 'block';
            }, function (e) {
                btnStart.style.display = 'block';
                btnEnd.style.display = 'none';
            });

FullScreen.on(context, open, close);

context: 전체화면 영역

open: 전체화면 open 시 이벤트 핸들러

close: 전체화면  close 시 이벤트 핸들러

        bind(document, 'keyup', function (e) {
            // space key
            if (e.keyCode === 32) FullScreen.off();
        }, false);

FullScreen.off(): 전체화면 중지.

3. 실행화면 및 브라우저 지원 상황:

 실행화면:

브라우저 지원 상황:

참고 사이트:

http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/

HTML5 PushState()를 활용한 PJAX 구현

기존 AJAX 사용 시 이용할 수 없었던 브라우저 뒤로 가기(히스토리 내역을 활용한 기능)기능을 보완하기 위한 방법으로 "location.hash" 를 활용한 Hashbang(hash: # 와 bang: !의 합성)기술이 등장 했습니다.

하지만 이 방식은 뒤로 가기 기능은 처리할 수 있지만, 일종의 URL Hack 방식으로, 검색 엔진들로 하여금 인덱싱되지 않는 단점(구글은 해시뱅에 대해 인덱싱이 가능하도록 escape 처리함)을 가지고 있습니다. 

또한, 방식 자체가 자바스크립트 기술(ajax)에 크게 의존하고 있기 때문에 스크립트 오류 시 깨지기 쉬운 사이트 구조를 가지게 됩니다.

이번 포스트에서 설명드릴 방식은 HTML5 명세의 PJAX(pushState + ajax)라는 기술이며, 이 기능을 통해 뒤로 가기 기능과 검색 인덱싱 처리를 동시에 보완할 수 있습니다.

하지만 HTML5 명세 기술이므로 모든 브라우저에서 지원하지 않는 단점도 가지고 있습니다.

아래는 PJAX(pushState + ajax)를 구현한(서버 + 클라이언트) 예제 코드이며, 코드에서처럼 전송 방식(ajax, normal)을 분기하여 접근 방식에 따라 사용자에게 다른 결과(컨텐츠)를 보여주게 됩니다.

- Ajax 분기 처리에 대한 더 자세한 설명은 아래 포스트 주소를 확인하시기 바랍니다.

http://mohwaproject.tistory.com/entry/Ajax-%EC%A0%84%EC%86%A1-%EA%B5%AC%EB%B6%84%ED%95%98%EA%B8%B0

public string Pjax1()
{
    // GET 요청 시 Jquery 및 Prototype과 같은 대표적인 라이브러리에서 ajax 요청을 판단하는 요청 값(X-Requested-With)을 추가하여 요청한다.
    if ((Request.Headers["X-Requested-With"] != null && Request.Headers["X-Requested-With"].ToLower() == "xmlhttprequest") || Request.Headers["ORIGIN"] != null)
    {
	return "Ajax Request History 1";
    }
    else
    {
	return "Normal Request History 1";
    }
}

public string Pjax2()
{
    // X-Requested-With Jquery 및 Prototype과 같은 대표적인 라이브러이에서 아래와 같은(X-Requested-With) 요청 헤더를 추가하여 요청한다.
    if ((Request.Headers["X-Requested-With"] != null && Request.Headers["X-Requested-With"].ToLower() == "xmlhttprequest") || Request.Headers["ORIGIN"] != null)
    {
	return "Ajax Request History 2";
    }
    else
    {
	return "Normal Request History 2";
    }
}

2. 클라이언트 측(자바스크립트) 코드: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<script type="text/javascript" src="/sabo/contents/script/jquery.js"></script>
<title></title>
 
 
<script type="text/javascript">
/*
    
History.pjax(History.pjax);
History.push(data, title, url);
    
*/
 
var History = new (function () {
 
    var History = function () {
 
        return this;
    }
 
    History.fn = History.prototype = {
        pjax: function (ㅊ) {
 
            url = url || '';
            callback = callback || function () { ; };
 
            var xhr = new XMLHttpRequest();
            xhr.open("get", url, true);
 
            xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
 
            var that = this;
 
            xhr.onload = function () {
                callback.apply(that, [xhr.response]);
            };
 
            xhr.send(null);
 
        },
        push: function (data, title, url) {
 
            data = data || '';
            title = title || '';
            url = url || '';
 
            window.history.pushState && window.history.pushState(data, title, url);
 
            return this;
        }
    }
 
    return History;
 
} ())();
 
 
bind(window, 'load', function () {
 
    bind(document.getElementById('pjax1'), 'click', function (e) {
 
        History.pjax('http://kin.dragonflygame.co.kr/sabo/blog/board/Pjax1/', function (data) {
 
            var data = document.getElementById('containerHTML').value + data + ", " + new Date().getTime() + ' ';
 
            // pushState 추가
            this.push(data, '', window.location.href);
            show(data);
        });
 
        window.history.pushState && stopDefault(e);
 
    }, false);
 
    bind(document.getElementById('pjax2'), 'click', function (e) {
 
        History.pjax('http://kin.dragonflygame.co.kr/sabo/blog/board/Pjax2/', function (data) {
 
            var data = document.getElementById('containerHTML').value + data + ", " + new Date().getTime() + ' ';
 
            // pushState 추가
            this.push(data, '', window.location.href);
            show(data);
 
        });
 
        window.history.pushState && stopDefault(e);
 
    }, false);
 
 
    bind(window, 'popstate', function (e) {
        show(e.state);
    });
 
}, false);
 
function show(data) {
    if (data) document.getElementById('containerHTML').value = data;
}
 
 
function bind(elem, type, handler, capture) {
    type = typeof type === 'string' ? type : '';
    handler = typeof handler === 'function' ? handler : function () { ; };
    capture = capture || false;
 
    if (elem.addEventListener) {
        elem.addEventListener(type, handler, capture);
    }
    else if (elem.attachEvent) {
        elem.attachEvent('on' + type, handler);
    }
 
    return this;
}
 
function stopDefault(e){
    if (window.event) e.returnValue = false;
    else if (e.preventDefault) e.preventDefault();
};
 
 
//]]>
</script>
</head>
<body>
<textarea id="containerHTML" rows="" cols="" style="width:500px;height:500px"></textarea><br /><br />
<a id="pjax1" href="http://kin.dragonflygame.co.kr/sabo/blog/board/Pjax1/">Pjax1</a>
<a id="pjax2" href="http://kin.dragonflygame.co.kr/sabo/blog/board/Pjax2/">Pjax2</a><br /><br />
</body>
</html>

3. 실행 결과:

PJAX 를 지원 브라우저에서는 아래 결과와 같이 모든 Ajax 요청에 대한 히스토리(뒤로/앞으로 가기 지원)를 가지게 됩니다.

반면, 그렇지 않는 브라우저(IE8-)에서는 서버측 분기 처리로 인해 <a> 요소의 href 속성에 할당된 주소의 컨텐츠를 

가지게 됩니다.

일반 전송 방식에 의한 결과.




참고 사이트:

ajax 와 hashbang 그리고 pjax:
http://rkjun.wordpress.com/2012/05/29/ajax-%EC%99%80-hashbang-%EA%B7%B8%EB%A6%AC%EA%B3%A0-pjax/

HTML5 History/State API를 이용한 Ajax 히스토리 구현:
http://firejune.com/1743#0

Web Audio API(Webkit) 기본 사용법

지난 7월 7일 NHN 개발자 블로그인 "Hello World"에서 열린 "제2회 Front-End 개발자들을 위한 오픈 세미나" 가 있었습니다.

참석은 하였지만, 개인적인 사정으로 두 번째 섹션까지밖에 들을 수 없어 많이 아쉬웠던 세미나 이기도 합니다.;;ㅠㅠ

아래 작성된 코드는 이날 세미나의 세 번째 섹션인 "Web Audio API"에 대한 소스를 이리저리 찾아보며(구글링을 통해) 작성된 예제 코드입니다.

또한, 코드 작성 시 기술(음향)에 대한 전문적인 지식이 많이 부족하여 소스에 대한 응용이 전무합니다.;;;(API에 대한 한글 문서가 없다는 점과 기반 지식이 부족하여 몇몇 소스는 이해하기도 어려었습니다.;;)

1. 사운드 데이타 요청(Ajax) 시 응답 HTTP Header는 아래와 같습니다.

2. 작성된 소스는 아래와 같으며, 기본적인 API 사용에 관해 관심 있으신 분은 아래 소스를 테스트해보시기 바랍니다.

참고 사이트:

제2회 hello world 오픈세미나 Web Audio API-가능성엿보기:

http://www.slideshare.net/deview/2-hello-world-web-aaudioapi

SoftSynth:

http://www.softsynth.com/webaudio/gainramp.php

GETTING STARTED WITH WEB AUDIO API:

http://www.html5rocks.com/en/tutorials/webaudio/intro/

SqlLite Helper

HTML5에서 제공되는 WEB DB인 SqlLite Helper Module을 아래 코드와 같이 작성해(간단히;;) 보았습니다.

SqlLite.ready(name, callback, size, version, displayName) 함수

name: DB명

callback: 완료 시 handler method

size: DB Size

version: DB Version

displayName: displayName