Загрузка файлов: uploadprogress и jquery
Хочется рассказать как сделать загрузку файлов, используя uploadprogress (должен установлен у хостера, у меня нет проблем т.к. collocation) и jquery.
Загрузку файлов может лучше на flash реализовать, но т.к. я не силен во flash....
Чем хорош данный метод: - можно легко подогнать под дизайн сайта
- показывает скорость загрузки
- сколько загруженно
- время до завершения загрузки
- в процентах сколько загруженно
Для начала скачайте и подключите jquery.js: http://jquery.com/
PHP код:
<head>
....
<script src="/js/jquery.js" type="text/javascript">
...
</head>
Пример формы для загрузки файла:
PHP код:
// нужен, что бы убрать лишнее после нажатия на кнопку ЗАГРУЗКИ
<div id="form_upload" style="display: block;">
//форма для загрузки
<form action="/upload.php" method="POST" id="upload" name="upload" enctype="multipart/form-data">
<input type="file" name="uploadfile" title="Добавить файл" />
// присваиваем файлу уникальный номер, что бы потом его контролировать
<input type="hidden" name="UPLOAD_IDENTIFIER" value="1234">
// не люблю стандартные кнопки submit +)
<a onclick="startStatus();" href="javascript:document.upload.submit()">Загрузить</a>
</form>
// end: форма для загрузки
</div>
// необходимо, что бы показывать информацию для пользователя
<!-- progress bar-->
<div id="progress_bar">
<div id="bg"><div id="bar" class="bar"></div><div id="pers"></div></div>
<div id="info" >
<div id="in1"></div>
<div id="in2"></div>
</div>
</div>
<!-- //progress bar-->
Созадать файл info.php:
из которого по uid будем получать данные о файле.
PHP код:
<?php
$status = uploadprogress_get_info($_POST['uid']);
echo json_encode($status) ;
?>
href="javascript:document.upload.submit()" upload - это имя формы.
startStatus(); - функция javascript - после нажатия на кнопку загрузки, начинаем получать информацию о загружаемом файле.
Функция startStatus():
PHP код:
function startStatus() {
// убираем форму для загрузки файла
$("#form_upload").fadeOut();
//показываем информацию о загружаемом файле
$("#progress_bar").fadeIn();
//через 1.5 сек. начинаем смотреть состояние файла
setTimeout('getStatus()', 1500);
}
Функция getStatus() :
PHP код:
function getStatus() {
//из файла info.php получаем данные
$.getJSON("/info.php",{
uid: "1234", // уникальный номер файла
math: Math.random()
},
function(data){
timelast=data.time_last;
// размер загружаемого фала
total = data.bytes_total;
// скорость казгрузки b/s
speed = data.speed_average;
//загружено байт
bytes = data.bytes_uploaded;
// времени до окончания загрузки
eta = data.est_sec;
//переводим в минуты время
min = Math.round(eta / 60);
//секунды
sec = eta - min*60;
// показываем мин +сек. или секунды
if(min==0){time=sec+" сек."}else{time=min+" мин."+sec+" сек."}
//добавляем информацию о времени и скорости в <div id="in1"... используя функцию [B]speeds()[/B]
$("#in1").html(time+" ("+speeds(speed)+")");
//добавляем в <div id="in2"... информацию о сколько загрузили и процентах, используя функцию [B]fsize()[/B] она будет описана ниже
$("#in2").html(fsize(bytes)+"/"+fsize(total)+"("+Math.round(bytes * 100 / total) + "%"+")");
//рисуем строку загрузки файла
progressdata(bytes,total);
// добавляем в центр загрузки проценты <div id="pers"...
$("#pers").html(Math.round(bytes * 100 / total) + "%");
});
//вызываем каждую секунду данную функцию, что бы обновлять данные загрузки файла
setTimeout('getStatus()', 1000);
}
функции fsize() и speeds() можно объеденить в одну функцию+) :
PHP код:
function fsize (x) {
x = Math.round(x / 1024);
if (x < 1000) {
return x + " " + "Кб";
}
x = Math.round(x * 100 / 1024) / 100;
return x + " " + "Мб";
}
function speeds (x) {
x = Math.round(x / 1024);
if (x < 1000) {
return x + " " + "Кб/сек";
}
x = Math.round(x * 100 / 1024) / 100;
return x + " " + "Мб/сек";
}
Функция progressdata() :
PHP код:
function progressdata(bytes,total) {
// увеличиваем ширину <div id="bar"... т.е. строку загрузки файла
$("#bar").css("width",Math.round(bytes * 100 / total)+"%");
}
Добавляем стили css:
PHP код:
<style type="text/css">
#progress_bar{
position:relative;
width:300px;
display: none;
margin:15px 0 0 0px;
}
#in1{
float:left;
position:relative;
}
#in2 {
float:right;
position:relative;
}
#bg{
width:300px;
border:1px solid black;
height:10px;
display:block;
}
#info {
color:gray;
}
.bar{
position:relative;
background:#FFBE26;
height:10px;
//картинка индикации
background-image:url(/images/uploadprogress_bggreen.png);
background-repeat: repeat-x;
width:0%;
}
#pers{
position:relative;
text-align: center;
color: black;
font-size:9px;
left:145px;
top:-10px;
float:left;
}
</style>
Вот что у меня получилось:
http://pic.ipicture.ru/uploads/090110/c41DMXZ9JT.png
P.S.
Не судите строго, первая статья +)
Спрашивайте если что то непонятно, подробнее обьясню...
P.S.2
При использовании nginx не работает uploadprogress... в инете найдется инфа как это исправить, но не стоит этого делать, лучше создать домен 3 уровня, где frontend apache...
Практически аналогичный загрузчик можно сделать используя php_apc.... если хотите напишу статейку +) |
