Требуется 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]

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

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

Как и Digitarald я  применил  mootools фреймворк.

Серверная часть позаимствована от Steve Miles ajax uploader

Требования от хостинга:

1. Выполнение cgi скриптов.
2. Установленный Perl.
3. PHP (4 или 5)

Возможности:

1. Закачивать большие файлы на сервер. ( Вы не ограничены директивами max_post_size или max_upload_size и т.п.)
2. Во время загрузки файла отображается индикатор прогресса. (Также возможно отображать скорость и расчетное время конца загрузки)
3. Сделать ajax аплоад опциональным. Тоесть пользователь может выбрать для себя режим загрузки.

Данный скрипт удобно применять в система где уже есть аплоад и хотелось бы сделать прогрессбар с минимумом прилагаемых усилий.

Я сделал пример на котором можно разобраться как это работает. Также этот пример можно полностью скачать со всей иерархией папок и нужными файлами.

Пример upload.tpoxa.com

Первый вариант — обычный.

<form id="myaupload" action="postscript.php" enctype="multipart/form-data" method="post">
 
<fieldset>
<legend>Закачайте файл</legend>
 
<label for="filename">Название файла</label>
<input id="filename" name="filename" size="40" type="text" />
 
<label for="file">Файл</label>
<input id="file" name="file" type="file" />
 
<input name="goupload" type="submit" />
</fieldset>
 
</form>

Скрипт postscript.php отображает значения суперглобальных массивов $_POST и $_FILES
Обычно мы используем функцию move_uploaded_file котороя переместит файл в папку для постоянного хранения

В случае же «аякс загрузки» это делает наш cgi скрипт который закачивает файл сначала во временное хранилище потом в любую папку которую мы укажем.
В результате postscript.php не получит никаких данных в $_FILES но зато в $_POST будет уже локальный (размещенный на сервере) адрес загружаемого файла.
В общем советую поиграться на примере.

Для того чтобы форма стала «аяксовой» нужно подключить в странице файлы аплоадера и выполнить такой код

<script type="text/javascript">
 window.addEvent('domready', function() {
  var UploadeManagerObj = new UploadeManager('myaupload',{});
 })
</script>

«myaupload» — Это ID нашей формы.

Настройка.

Настройка сводится к заливке всех файлов на сервер и установки прав на них.

Папки tmp и upload должны быть записуемыми для PHP.  CHMOD 777

У /cgi-bin/upload.cgi — должны быть права для запуска CHMOD 755

Для отладки советую включить DEBUG режим при котором iframe в который «сабмитится» форма будет видим

<script type="text/javascript">
 window.addEvent('domready', function() {
  var UploadeManagerObj = new UploadeManager('myaupload',{debugmode:true});
 })
</script>

Если появятся какие вопросы с радостью отвечу.
uploader.zip