Заинтересовал меня модуль Apache2::UploadProgress.
Понравился функционал, к тому же полностью реализует необходимую мне задачу. Но JavaScript переписал на базе библиотеки prototype.
Пример можно посмотреть тут.
Сам код:
/* Class for UploadProgress perl module. Version 0.01.
*
* (c) 2008 Alexey Gorbov
*
*--------------------------------------------------------------------------*/
var PerlTubeProgress = Class.create({
version: '0.01',
initialize: function (element){
this.meter=element;
this.uploadend=false;
},
startupload:function (form){
this.form=form;
this.makemeter();
if (form.action.match(/\?/))
form.action += '&progress_id=' + this.progress_id;
else
form.action += '?progress_id=' + this.progress_id;
form.setStyle({display : 'none'});
setTimeout(this.updateProgress.bindAsEventListener(this), 500 );
return true;
},
makemeter:function (){
this.progress_id=this.generateProgressID();
if (!this.meter) {return false;}
this.meter=$(this.meter);
this.meter.update();
var desc=new Element('div',{id:'perltube-desc'});
var prog=new Element('div',{id:'perltube-prog'});
prog.insert(new Element('div',{class:'perltube-amount'}));
var percent=new Element('div',{class:'perltube-percent'});
percent.update('0%');
prog.insert(percent);
this.meter.insert(prog);
this.meter.insert(desc);
var currenttime = new Date();
this.starttime=currenttime.getTime();
return this.meter;
},
updateProgress:function (){
var url = '/UpdateProgress?progress_id=' + this.progress_id;
var tube=$('perltube-desc');
var meter=$('perltube-prog');
var bar=meter.select('div.perltube-amount')[0];
var perc=meter.select('div.perltube-percent')[0];
var size;
var received;
var me=this;
var rq=new Ajax.Request(url,{
method:'get',
onSuccess: function(transport) {
var json = $H(transport.responseText.evalJSON(true));
if (json){
var size=json.get('size');
var received=json.get('received');
tube.update('Оправлено '+me.formatbytes(received)+' из '+me.formatbytes(size));
var amount=Math.round(380*received/size);
bar.setStyle({'width':amount+'px'});
var percentage=Math.round(100*received/size);
perc.update(percentage+'%');
if (received >= size){
tube.update('complete');
}
else {
setTimeout(me.updateProgress.bindAsEventListener(me), 1000);
}
}
}
});
},
formatbytes: function (bytes){
var suffix='';
if (bytes > 1073741824) {
bytes /= 1073741824;
suffix = 'Гб';
} else if (bytes > 1048576) {
bytes /= 1048576;
suffix = 'Мб';
} else if (bytes > 1024) {
bytes /= 1024;
suffix = 'Кб';
};
bytes=Math.round(bytes*100)/100;
return ''+bytes+suffix;
},
generateProgressID: function() {
var id = '';
var alpha = "0123456789abcdef";
for(var i=0; i < 32; i++) {
id += alpha.charAt(Math.round(Math.random()*14));
}
this.progress_id=id;
return id;
}
});
var progress = new PerlTubeProgress('temptube');
UPD: код не совсем рабочий, и представлен только для ознакомления
13 марта 2008 г.
Javascript UI для Apache::Uploadprogress
Подписаться на:
Сообщения (Atom)