Nginx Http Upload Progress Module – Mootools

Скрипт будет полезен для тех кто использует Nginx и модули Nginx upload module и Nginx Upload Progress Module

Требуется mootools версии 1.2 или выше.

В решении используется  dwProgress bar талантливого разработчика  David Walsh.

Код в head

[xhtml]
<script type="text/javascript" src="/js/mootools-1.2.4-core.js"></script>
<script type="text/javascript" src="/js/mootools-1.2.4-more.js?v1"></script>
<script type="text/javascript" src="/js/dwProgressBar.js">
[/xhtml]

Дополнительные CSS стили

[css]
#progress_container { background-color:#FFFFFF; font-size:0.9em; height:50px; margin:0; padding:10px; width:400px; }
#box2 { background:transparent url(/img/progress-back.png) no-repeat scroll right center; float:left; height:18px; width:400px; }
#perc2 { background:transparent url(/img/progress.png) no-repeat scroll right center; height:18px; }
#progress_filename { color:#000000; font-size:0.9em; line-height:1.2em; padding:0 0 10px; width:100%; }
[/css]

Код в body

[xhtml]

<form id="upload_form" action="/upload.php" method="post" enctype="multipart/form-data">
<h1>Добавить файл</h1>
<p><input type="file" id="id_file" name="file" size="40"></input></p>
<div style="font-size:10px; padding:10px;color:#999">
<p>Размер файла должен быть до 300 мБ.</p>

<div>
<div id="progress_container">
<div id="progress_filename">Выберите файл</div>
<div id="put-bar-here"></div>
</div>
</div>
</div>
<p><input type="submit" value="Залить!" id="submit"></input></p>
</form>
[/xhtml]

[jscript]
<script type="text/javascript" charset="utf-8">

var uuid = ""
pb2 = new dwProgressBar({
container: $(‘put-bar-here’),
startPercentage: 0,
speed:1000,
boxID: ‘box2’,
percentageID: ‘perc2’,
displayID: ‘text’,
displayText: false
});

for (i = 0; i < 32; i++) {
uuid += Math.floor(Math.random() * 16).toString(16);
}

var req = new Request({
method: ‘get’,
headers: {‘X-Progress-ID’: uuid},
url: ‘/progress’,
initialDelay: 500,
delay: 1000,
limit: 10000,
onSuccess: function(reply) {
test = JSON.decode(reply);
switch(test.state) {
case "uploading":
percent = 0.00 + parseFloat(Math.floor((test.received / test.size)*1000)/10);
$(‘progress_filename’).set(‘html’,’Загрузка ‘ + filename + ‘ …’ + percent + ‘%’);
pb2.set(percent);
break;
case "starting":
$(‘progress_filename’).set(‘html’,’Начинается загрузка… ‘);
break;
case "error":
$(‘progress_filename’).set(‘html’,’Ошибка… ‘ + test.status);
break;
case "done":
$(‘progress_filename’).set(‘html’,’Загрузка завершена…’);
req.stopTimer();
break;
default:
//
break;
}
}
})

window.addEvent(‘domready’, function() {

$(‘submit’).addEvent( ‘click’, function(evt){
filename = $("id_file").get(‘value’).split(/[\/\\]/).pop();
$("progress_filename").set(‘html’,’Uploading ‘ + filename + ‘ …’);
$("upload_form").set(‘action’, "/upload.php?X-Progress-ID=" + uuid);

req.startTimer(‘X-Progress-ID=’ + uuid);

} );
})
</script>
[/jscript]

Демонстрацию работы скрипта можно посмотреть здесь(нужна регистрация)

Скачать архив

#progress_container {
background-color:#FFFFFF;
font-size:0.9em;
height:50px;
margin:0;
padding:10px;
width:400px;
}
#box2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/img/progress-back.png) no-repeat scroll right center;
float:left;
height:18px;
width:400px;
}
#perc2 {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(/img/progress.png) no-repeat scroll right center;
height:18px;
}
#text {
color:#000000;
float:left;
font-family:tahoma,arial,sans-serif;
font-size:11px;
padding:3px 0 0 10px;
}
#progress_filename {
color:#000000;
font-size:0.9em;
line-height:1.2em;
padding:0 0 10px;
width:100%;
}

One thought on “Nginx Http Upload Progress Module – Mootools”

  1. Зарегался, прогресс бара не увидел (

    Возникли какие-то проблемы с Nginx Http Upload Progress Module ?

Leave a Reply

Your email address will not be published. Required fields are marked *