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]
Демонстрацию работы скрипта можно посмотреть здесь(нужна регистрация)