Rev. 2.73

Password:

sthenicRuby on Rails 로 구축된 Ajax 파일공유 서비스입니다. 동적인 암호 품질 그래프와, 파일 업로드 프로그레스-바가 잘 구현되 있어서 후벼 봤습니다. 파일 업로드 프로그레스바는 완전 구라더군요. 전송량에 상관없이 무조건 100%로 달립니다. ㅡ,.ㅡ;

※ 이 페이지는 RSS리더기에서 정상으로 보이지도 않을 뿐더러 작동하지도 않습니다. :(

Comments

이 곳의 상단에 적용되어 있는 프로그레스 바입니다. 자바스크립트의 양이 많이지면서 CPU의 처리과정이 다소 길어짐에 따라 진행상황을 시각적으로 표시하기 위해 만들어 보았습니다. 이 처리과정 중에서도 아래의 스크립트는 이미지의 로딩현황만을 체크하여 진행상황을 표시하는 역할을 합니다. IE와 파이어폭스에서 정상작동하는 것을 확인하였습니다. 이 스크립트는 Prototype 프레임웍 기반으로 코딩되었습니다.

// Progress Bar
// Developer: FireJune(http://firejune.com)

var Progress = {
bar:function(value){
Element.setStyle('progress', {width:value+'px'});
Element.update('imgCnt', Math.ceil(100-((100/this.bSize)*value))+'%');
},
init:function(){
this.imgs = $$('IMG');
this.bSize = Element.getWidth('progress');
this.gSize = this.bSize/this.imgs.length;
this.loaded = 0;
for(n=0;n<this.imgs.length;n++) this.check(n);
},
draw:function(){
this.loaded++;
this.bar(Math.ceil(this.bSize-(this.gSize*this.loaded)));
if(this.imgs.length<=this.loaded)
setTimeout('Element.hide("progress");new Effect.Fade("progress_text");', 500);
},
check:function(n){
(this.imgs[n].complete)? this.draw():setTimeout('Progress.check('+n+')', 500);
}
}

// 사용하기
Event.observe(window. 'load', Progress.init);

// HTML 노드
<div id="progress_text">
processing...
<div id="imgCnt">0%</div>
</div>
<div id="progress"></div>

// 스타일시트
#progress {position:absolute; width:700px; height:144px; z-index:98; right:0;
border-left:2px solid #999; background:#fff}
#progress_text {position:absolute; font:bold 25px HY견고딕, Dotum;
color:#fff; right:260px; top:45px; z-index:99}

- 페이지 전체 이미지 수
- 그래프의 너비파악 및 계산
- 개개 이미지의 로딩완료 여부 파악
- 로딩이 완료되지 않은 이미지는 0.5초후 다시 파악
- 로딩 완료된 순서로 그래프 드로잉
- 이미지 로딩이 모두 완료되면 그래프 숨김

Comments

fileuploadprogress.gif

FineTooth의 Christopher Bottaro는 파이썬 CGI와 Ajax Prototype, JSON을 이용하여 놀라운 파일 업로드 프로그레스바 구현방법을 공개했다. 전체 파일 수, 파일이름, 프로그레스바, 전송속도, 남은시간까지 파일 업로드 진행상황에 필요한 모든 항목을 실시간으로 표시한다.

그저 놀랍다.... 놀라워...

Comments