FancyUpload 예제 - Queued Image Uploader
Harald Kirschner씨가 파일폼을 대체할 수 있으며 겸손하고(unobtrusive), 멀티파일 업로드는 물론 진행상태바 애니메이션도 되는 FancyUpload의 새 버전을 만들었습니다.
제목의 Swiff 라는 이름에서 알 수 있듯, MooTools 기반입니다. 다음과 같은 코드로 실행되는 Queue가 되는 사진 업로더 예제를 보실 수 있습니다:
[code:Js]
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
'url': $('form-demo').action,
'fieldName': 'photoupload',
'path': '../../source/Swiff.Uploader.swf',
'onLoad': function() {
$('demo-status').removeClass('hide');
$('demo-fallback').destroy();
}
});
/**
* Various interactions
*/
$('demo-browse-all').addEvent('click', function() {
swiffy.browse();
return false;
});
$('demo-browse-images').addEvent('click', function() {
swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
return false;
});
$('demo-clear').addEvent('click', function() {
swiffy.removeFile();
return false;
});
$('demo-upload').addEvent('click', function() {
swiffy.upload();
return false;
});
var swiffy = new FancyUpload2($('demo-status'), $('demo-list'), {
'url': $('form-demo').action,
'fieldName': 'photoupload',
'path': '../../source/Swiff.Uploader.swf',
'onLoad': function() {
$('demo-status').removeClass('hide');
$('demo-fallback').destroy();
}
});
/**
* Various interactions
*/
$('demo-browse-all').addEvent('click', function() {
swiffy.browse();
return false;
});
$('demo-browse-images').addEvent('click', function() {
swiffy.browse({'Images (*.jpg, *.jpeg, *.gif, *.png)': '*.jpg; *.jpeg; *.gif; *.png'});
return false;
});
$('demo-clear').addEvent('click', function() {
swiffy.removeFile();
return false;
});
$('demo-upload').addEvent('click', function() {
swiffy.upload();
return false;
});
from FancyUpload: Swiff meets Ajax on Ajaxian
'[IT] Web Tech' 카테고리의 다른 글
Twistori : Tweets와 Script.aculo.us로 이야기 하기 (0) | 2008.05.06 |
---|---|
빠른 스트리밍 Ajax 프록시 (0) | 2008.05.06 |
모바일 브라우저 동시성 테스트: 모바일 브라우저를 준비하세요 (0) | 2008.05.04 |
Aptana Cloud : 클라우드로의 개발을 데스크탑에서! (0) | 2008.05.04 |
FancyUpload : Swiff, Ajax를 만나다 (0) | 2008.05.03 |
Coherent: Ajax를 위한 Cocoa 데이터 바인딩 (0) | 2008.05.03 |
JavaScript로 실행하는 Java (0) | 2008.05.03 |
Ext JS : 오픈소스 FLOSS 예외사항 (0) | 2008.05.03 |
OpenExt : ExtJS의 포크 프로젝트 (0) | 2008.05.02 |
댓글을 달아 주세요