Antichat снова доступен.
Форум Antichat (Античат) возвращается и снова открыт для пользователей.
Здесь обсуждаются безопасность, программирование, технологии и многое другое.
Сообщество снова собирается вместе.
Новый адрес: forum.antichat.xyz
 |
Загрузка файлов: uploadprogress и jquery |
10.01.2009, 17:11
|
|
Новичок
Регистрация: 09.01.2009
Сообщений: 7
Провел на форуме:
34579
Репутация:
29
|
|
Загрузка файлов: 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>
Вот что у меня получилось:
P.S.
Не судите строго, первая статья +)
Спрашивайте если что то непонятно, подробнее обьясню...
P.S.2
При использовании nginx не работает uploadprogress... в инете найдется инфа как это исправить, но не стоит этого делать, лучше создать домен 3 уровня, где frontend apache...
Практически аналогичный загрузчик можно сделать используя php_apc.... если хотите напишу статейку +) |
|
|
10.01.2009, 17:32
|
|
Участник форума
Регистрация: 09.03.2008
Сообщений: 193
Провел на форуме:
2140897
Репутация:
267
|
|
Нормалльно,если конечно сам писал!  больше похоже на перевод
Cсылки по теме:
Модуль uploadprogress
Код:
http://pecl.php.net/package/uploadprogress
Модуль Alternative PHP Cache (APC)
Код:
http://pecl.php.net/package/APC
Ну и реализация с использыванием APC
Код:
http://t.wits.sg/2008/06/25/howto-php-and-jquery-upload-progress-bar/
|
|
|
|
10.01.2009, 17:40
|
|
Новичок
Регистрация: 09.01.2009
Сообщений: 7
Провел на форуме:
34579
Репутация:
29
|
|
Сообщение от Shadow_p1raT
Нормалльно,если конечно сам писал! больше похоже на перевод Я не занимаюсь переводом чужих статей +)
Для своего сайта написал загрузчик, вот решил поделиться, может кому нужно.
Кстати, http://t.wits.sg/2008/06/25/howto-php-and-jquery-upload-progress-bar/ лучшая статья которую я находил в инете +)
|
|
|
|
17.01.2009, 07:39
|
|
Познающий
Регистрация: 16.04.2005
Сообщений: 62
Провел на форуме:
53206
Репутация:
5
|
|
Вообще неплохо было бы вначале описать примерный алгоритм работы..
Статья отличная! Добавил +!
|
|
|
|
04.03.2009, 22:17
|
|
Новичок
Регистрация: 04.03.2009
Сообщений: 2
Провел на форуме:
760
Репутация:
0
|
|
А можно прицепить полностью исходники, а то мне как раз такой скрипт надо, а из статьи пытался слепить, че-то не работает 
uploadprogress у меня установлен... |
|
|
|
05.03.2009, 05:45
|
|
Участник форума
Регистрация: 27.10.2008
Сообщений: 244
Провел на форуме:
963613
Репутация:
428
|
|
Вообще неплохо было бы вначале описать примерный алгоритм работы..
и как правильно какать!
|
|
|
|
21.11.2009, 21:59
|
|
Новичок
Регистрация: 01.10.2009
Сообщений: 27
Провел на форуме:
52963
Репутация:
-2
|
|
А выложить можешь?
|
|
|
|
22.11.2009, 21:41
|
|
Постоянный
Регистрация: 16.02.2008
Сообщений: 724
Провел на форуме:
1025839
Репутация:
581
|
|
Что тебе выложить-то? В статье, по-моему, все доходчиво описано, - что и как.
|
|
|
|
06.12.2009, 21:19
|
|
Познавший АНТИЧАТ
Регистрация: 29.04.2007
Сообщений: 1,189
Провел на форуме:
5749763
Репутация:
1680
|
|
В код особо не вкуривался....
Но правильно ли я понимаю, что этим методом можно загрузить на сервер файл в обход ограничений php, в частности "POST_MAX_SIZE" и "MAX_UPLOAD_FILE" ?
|
|
|
|
10.12.2009, 22:49
|
|
Участник форума
Регистрация: 04.12.2005
Сообщений: 202
Провел на форуме:
414834
Репутация:
99
|
|
Сообщение от Nightmarе
В код особо не вкуривался....
Но правильно ли я понимаю, что этим методом можно загрузить на сервер файл в обход ограничений php, в частности "POST_MAX_SIZE" и "MAX_UPLOAD_FILE" ?
Не обойти, используется все по стандарту php, JS тут только плюшки рисует.
|
|
|
|
|
|
|
Здесь присутствуют: 1 (пользователей: 0 , гостей: 1)
|
|
|
|
Похожие темы
Линейный вид
